You must understand that the picture file is a set of ordinary text data in XML format, which means that you can edit the image with any text editor. Look, it's not difficult to learn.
How to open an SVG drawing?
SVG is a format created specifically for the Internet to describe vector primitives on a web page. Of course, among SVG viewer programs, the flagships are modern browsers (the latest versions of Opera, Firefox, Chrome, as well as IE 9 versions). Browsers support almost all SVG elements (including animation and ECMAScript), with Opera reaching 100% support.
Table showing the level of SVG support by different browsers as of July 2010:
| Browser | Support level |
|---|---|
| Opera 10.53 | 95 % |
| Chrome 4 | 82 % |
| Safari 4.0.5 | 82 % |
| Firefox 3.6 | 62 % |
| Internet Explorer 9 prev 3 | 52.55 % |
From these data it follows that it is best to open SVG with the latest version of the Opera browser. This browser has versions for both Windows and Linux, so no one should have any problems.
In general, almost all programs for viewing and editing images support SVG, but most of them cannot play animation, not to mention scripts.
How to edit an SVG image?
SVG has existed since 1999, but began to actively develop only many years after its creation, thanks to the support of the largest IT companies in the world. The format is far from new, so any self-respecting software for working with it is simply obliged to support this format.
Table with a list of vector graphics software, many list items support SVG:
| Name | Developer | Price |
|---|---|---|
| AutoTrace | Martin Weber | free |
| Easy Trace | Easy Trace Group | 1500 €, 750 € upgrade |
| Freehand | Macromedia | $399, $99 upgrade |
| Illustrator | Adobe Systems | $499, $169 upgrade |
| MagicTracer | Elgorithms MagicTracer | $59 |
| MST Viewer | MS Technology | Commercial Use Only |
| PhotoLine | Computerinsel GmbH | 59 € |
| Potrace | Peter Selinger | free |
| R2V Toolkit | AlgoLab | $99 |
| Ras2Vec | Davide Libenzi | free |
| Image2XAML | Roman Kalachik | free |
| Raster to Vector | Raster to Vector | $99 |
| RasterVect | RasterVect | $79 |
| RaveGrid | RaveGrid | free for personal use (commercial version available) |
| Scan2CAD Pro | Softcover Intn"l | $469, $190 upgrade |
| Silhouette Pro | Free Soft S.A. | $359 |
| Adobe Streamline | Adobe Systems | ? |
| Vector Magic | Vector Magic | $7.95/mo, $295/lic, tokens |
| Vextractor | VextraSoft | $99 |
| VPHybridCAD | softelec | $1400 |
| WinTopo Freeware | SoftSoft | free |
| WiseImage | Consistent Software | $1400 |
| RasVector | Daniel Lu | GPL |
| Xara Xtreme | Xara Group Ltd. | 79$ Windows version, Linux version free |
| XTrace | Ronny Schütz | $25 for Amiga (demo available) |
| VectorNow | AutoDWG | $120.00 |
| DesignPresentation | DesignPresentation | Pay Per Use |
Below is a list of the most popular programs that allow you to create and edit SVG.
Inkscape
Inkscape is a program for creating and editing vector images, the main area of application is the creation of technical illustrations and diagrams. Written in C++ and GTK+. Can save created images in SVG 1.1 format. Inscape is released for many platforms (Windows, Linux, Mac OS), belongs to the category of free software, distributed under the GNU General Public License.
The program allows you to use all the filters and tools necessary for a designer: geometric primitives (polygons, circles, lines, curves, cubes, etc.), brushes, fill, eraser. In addition to the visual editor, there is also a text editor, which allows you to clearly see and edit the tree of XML elements.
Inkscape has been actively developing for many years; developers contact and exchange experiences with colleagues from Gimp and Scribus.
You can download Inkscape for free for any OS on the official website inkscape.org.
Image Magick
Almost all the functionality of the console utility for working with graphics Image Magick extends to SVG. Image Magick is free, and many applications have libraries that allow you to interact with this utility through its own interface. For example - Imagick in PHP.
Paid programs for working with SVG
Adobe Illustrator CS2
Developed by Adobe Systems, Inc. Adobe Illustrator CS2 has quite powerful SVG editing tools. The program is not free and not at all cheap, it costs more than $600, but it has a free demo version limited to 30 days. At first glance, it does not have any special advantages in the field of working with SVG compared to Inkscape, except that Photoshop fans will like the level of similarity between the two programs. Undoubtedly, Adobe has created the most convenient interface for designers over a long period of time.
CorelDRAW Graphics Suite
With the development of SVG, Corel Corp. could not stand aside. CorelDRAW Graphics Suite includes support for scalable vector graphics. The cost is almost $300, but there is a demo version. Available for Windows only.
Corel also offers to buy Corel WebDraw (Jasc WebDraw), a more vector-based web graphics and professional web design program. Cost - 180 dollars.
Sketsa SVG Editor
The program is written entirely in Java and runs on Windows, Linux, Mac OS. Unlike other vector graphics programs in general, Sketsa is strictly SVG-focused. It has a fairly nice and user-friendly interface. However, it costs almost $90.
Mayura Draw 4.3
There are also simpler paid solutions. For example - Mayura Draw for $39, the distribution size is only 1.3 MB. The program supports all the basic tools for editing SVG graphics, is lightweight and relatively fast.
Online SVG editor
Date: 2010.05.27 at 14:20:46Please, when copying material, put an active link to the article.
The concept of vector images means absolutely nothing to the vast majority of ordinary PC users. Designers, in turn, are increasingly inclined to use this type of graphics for their projects.
Previously, to work with SVG images, you would have to install one of the specialized desktop solutions like Adobe Illustrator or Inkscape on your computer. Now similar tools are available online, without the need to download.
By running the corresponding query on Google, you can get acquainted with a huge number of various online vector editors. But the vast majority of such solutions offer rather meager capabilities and most often do not allow you to work with serious projects. We will look at the best services for creating and editing SVG images directly in the browser.
Of course, online tools cannot completely replace the corresponding desktop applications, but for most users the offered set of functions will be more than enough.
Method 1: Vectr
A thoughtful vector editor from the creators of the familiar Pixlr service. This tool will be useful for both beginners and experienced users in working with SVG.
Despite the abundance of functions, it will be quite difficult to get lost in the Vectr interface. For beginners, detailed lessons and extensive instructions on each of the components of the service are provided. The editor's tools include everything you need to create an SVG image: shapes, icons, frames, shadows, brushes, support for working with layers, etc. You can draw an image from scratch or upload your own.
The export capabilities also include one of Vectr's most distinctive features: support for direct links to the SVG project in the editor. Many resources do not allow you to download vector images directly, but nevertheless allow their remote display. In this case, Vectr can be used as a real SVG hosting, which other services do not allow.
It should be noted that the editor does not always process complex graphics correctly. For this reason, some projects may open in Vectr with errors or visual artifacts.
Method 2: Sketchpad
A simple and convenient web editor for creating SVG images, based on the HTML5 platform. Considering the range of available tools, it can be argued that the service is intended exclusively for drawing. With Sketchpad you can create beautiful, well-designed pictures, but that's about it.
The tool has a wide range of customizable brushes of various shapes and types, a set of shapes, fonts and stickers for overlay. The editor allows you to fully manipulate layers - control their placement and blending modes. Well, as a bonus, the application is completely translated into Russian, so you shouldn’t have any difficulties mastering it.
Method 3: Method Draw
This web application is designed for basic operations with vector files. Externally, the tool resembles desktop Adobe Illustrator, but in terms of functionality, everything is much simpler here. However, Method Draw also has some features.
In addition to working with SVG images, the editor allows you to import raster images and create vector ones based on them. This can be done by manually tracing contours using a pen. The application contains all the necessary tools for composing vector drawings. There is an expanded library of shapes, a full-color palette and support for keyboard shortcuts.
Method Draw is definitely not suitable for creating serious vector projects - the reason for this is the lack of relevant functions. But thanks to the absence of unnecessary elements and a well-organized workspace, the service can be excellent for quickly editing or fine-tuning simple SVG images.
Method 4: Gravit Designer
Free web-based vector graphics editor for advanced users. Many designers put Gravit on a par with full-fledged desktop solutions, like Adobe Illustrator. The fact is that this tool is cross-platform, that is, it is fully available on all computer operating systems, as well as as a web application.
Gravit Designer is under active development and regularly receives new features, which are already enough for the layout of complex projects.
The editor offers you all kinds of tools for drawing paths, shapes, paths, text overlays, fills, as well as various custom effects. There is an extensive library of figures, thematic pictures and icons. Each element in the Gravit space has a list of properties that can be changed.
All this variety is “packed” into a stylish and intuitive interface, so that any tool is available in just a couple of clicks.
Considering that the service is designed for full-fledged work with vector graphics, it can be safely recommended even to professional designers. With Gravit, you can edit SVG graphics regardless of the platform you're doing it on. For now, this statement applies only to desktop OSes, but soon this editor will appear on mobile devices.
Method 5: Janvas
A popular tool for creating vector graphics among web developers. The service contains a number of drawing tools with highly customizable properties. The main feature of Janvas is the ability to create interactive SVG images animated using CSS. And in conjunction with JavaScript, the service allows you to build entire web applications.
In skillful hands, this editor is a truly powerful tool, while a beginner, due to the abundance of all kinds of functions, most likely simply will not understand what’s what.
Yes, the tool, unfortunately, is not free. But this is a professional solution, which is not useful to everyone.
Method 6: DrawSVG
The most convenient online service that allows webmasters to create high-quality SVG elements for their sites as easily as possible. The editor contains an impressive library of shapes, icons, fills, gradients and fonts.
Using DrawSVG, you can design vector objects of any type and properties, change their parameters and render them as separate images. It is possible to embed third-party multimedia files into SVG: video and audio from a computer or network sources.
This editor, unlike most others, doesn't feel like a browser port of a desktop application. On the left are the main drawing tools, and on the top are the controls. The main space is occupied by the canvas for working with graphics.
Editor Ratings:
Here is a list of 5 free online SVG editors using which you can view and edit any SVG file with ease. SVG file is a vector image format based on XML for 2D graphics and it also supports the interactivity and animation (Source: Wikipedia). These websites are extremely easy to use and save your time of downloading a software to view and edit SVG files.
All of these websites offer different set of features for helping you edit SVG files and none of them asks you to register. Simply open the web site you want to use and start working on it. Apart from editing, some of them also let you create new SVG file. So let's get started.
1.
The first website to edit SVG files online is . It lets you create new SVG document and edit an existing one. For editing, you can also choose the canvas size. All the tools for editing the SVG file are on left side. It includes tools like pencil tool, pen tool, shapes, add text, zoom feature, eye dropper tool, etc. It also lets you choose to view the wireframe view mode. There are few element specific options which you can access by right clicking on that particular element. When you are done editing, you can choose to save the file as image or PNG.
2.
Is the second online SVG editor which is hosted on Google Code. It is a very feature rich SVG editor when you think about the fact that it is completely free to use. It lets you upload images from PC and you can also create new ones. All the editing tools are on the left and you can easily switch between tools with one click. Some of the tools are pen, pencil, zoom, text, shape library, etc. It also lets you edit the source file and apply the corresponding changes. As for saving the file, you can save it as images and PNG file.
There are many features more which varies with different elements that you will use while editing the SVG file.
3.
Now let’s move to the third online SVG editor known as . It lets you add SVG file by uploading from PC, adding URL, or via clipart. It also has some sample files which you can use to try out its features. When you have added the file, then you can use the editing tools by clicking on the specific section. The editing tools section has Selection, Draw Elements, Draw Shapes, Stroke Style, Fill Style, Text Style, Marker Style, and Options. Clicking on the section displays all the tools available under it and you can use them.
4.
The second last SVG editor in the list is . It lets you open SVG file from PC as well as via OpenClipart RSS feed. On opening the file, you will see different elements used in making the SVG file on the left side. The controls for rotating the file content and zoom in/out are on top right side. All other options can be accessed by right-clicking on the element. These options are Edit Geometry, Edit Transform, Remove Element(s), and Properties.
5.
Is the last online SVG editor in the list. It supports file uploading only from PC. On opening the file, you will see the file content on the right side and all the editing options on the left side. These options are Optimization, Namespaces related, remove whitespace, elements, attributes, and styles. It also lets you view the source code of the imported SVG file.
These were the 5 free online SVG editors which you can use to view and edit SVG files with ease. Try them out to see which one fits your need best.
From the author: SVG images aren't as common as our favorite raster formats, PNG and JPG, but the benefits of vector graphics are attracting more and more designers. Designers are increasingly using vector graphics in their projects. Previously, we had to download desktop applications like Adobe Illustrator and Inkscape, but in 2017 we can design vector graphics without leaving the browser. If you've been looking for a free SVG editor, you can start with these six free tools.
Vectr
Vectr is a good choice for beginners and advanced SVG users. The interface is neat and not cluttered with too many tools you won't use. The editor is well suited for beginners in vector illustration. The user should not get lost among tools that are not used for what purpose. The kit includes several lessons. Even if you're new to SVG, you can learn quickly.
However, all of the above does not mean that Vectr has poor functionality. It has all the basic set for creating a regular image: shapes, text, layers, shadows, frames, backgrounds, etc. It can't compare to a full-fledged desktop editor, but for quick designs and edits it's more than enough. You can create an image from scratch or upload an existing one.
Errors may occur when loading complex illustrations into Vectr (maps or detailed diagrams). The editor does not always handle complex graphics well. However, for simpler SVG (icons, logos, etc.) this editor will be sufficient.
JavaScript. Fast start
If the online version does not have the functions you need, you can download the desktop version of the application. The editor is available for Windows, Mac, Linux and Chromebook.
Perhaps the coolest feature in Vectr is that you can link and embed images directly from the Vectr site, making it an effective SVG host. Many services block the downloading of SVG files, so this is a serious plus. You can display SVG images from Vectr on remote sites like WP, Medium, Tumblr, etc. that block direct SVG loading but allow it to be shown remotely.
Vectr allows you to share vector graphics in the editor panel so that other users can modify the graphics you create. That is, you can, for example, make an SVG logo template that users can customize to their liking. All this in the browser.
To this end, Vectr recently released a version of the editor in the form plugin for WP.
RollApp
Unlike other tools on the list, when you go to the RollApp home page, you don't see an editor. RollApp is a suite of applications, and the SVG editor is just one of the applications. Great tool, it's a browser version Inkscape.
To use RollApp you need an account. You can register a new one or log in using Google, Facebook, Amazon. Very convenient, I hate creating thousands of new accounts just to see the app.
Inkscape at its finest! Without a doubt, RollApp is the most feature-rich application on the list. You are literally using Inkscape in your browser! I haven't compared every detail, but this app appears to have ALL Incscape's features such as layers, objects, text, paths, filters, effects, extensions, etc.
Large files are not processed as quickly, because actions are performed on application servers and over the Internet. In short, if you need to edit large and complex files, RollApp will not be an ideal option, but for other tasks not included in the basic set, this editor is better than others.
BoxySVG
If you've been reading SitePoint for a long time, you should be familiar with the editor BoxySVG, because over the past 12 months we have already talked about him. I will not do a detailed review, since this has already been done in this article.
JavaScript. Fast start
Learn the basics of JavaScript with a hands-on example of how to create a web application.
What’s important is that since Alex’s review, BoxySVG has added a code inspector, making it one of the most relevant SVG tools for web developers.
Janvas
A couple of years ago Janvas was a very popular SVG editor. Unfortunately, this editor has not been developed recently, but even so it still works. The web is moving forward, but Janvas is stagnant, so interest in it has faded. Alex from SitePoint worked with this tool a bit in 2013-14 (including the paid version) and even answered questions for a while on the Google+ page. Janvas was quite a powerful tool.
The main problem with Janvas is that it is a bit outdated. Browsers evolve, and applications that don't follow browsers become less stable every day. Janvas has many features: shapes, text, drawing tools, paths, masks and layers. However, users on forums say that many of these functions do not bring the desired results.
There is good news - a new version will be released in the form of a Chrome application. We hope they fix the problems.
DrawSVG
You may have already chosen a free online SVG editor. If not, then move on. DrawSVG is a fully compatible SVG editor with many features. I really like that the design of this application is really tailored for the web and does not look like a port of a desktop application to a browser. The menu is located on the left; clicking opens a second-level menu, etc.
With DrawSVG you can draw, modify and render objects. You can draw simple shapes, there are Bezier curves, straight and curved text, many styles of strokes and fills, etc. SVG can also be exported to PNG.
SVG-edit
SVG-edit– the grandfather of online vector graphics editors, appeared in the mid-2000s. There is no server functionality, everything works in the browser. It is impossible to save your work without adding your own functionality.
However, for an editor whose life began as a very limited and obscure vector drawing program, SVG-edit's functionality has continually improved.
Using SVG-edit you can draw simple shapes (lines, rectangles, circles, polygons, freehand lines, etc.), use paths, layers, gradients, you can view and edit SVG sources, export to PNG, JPEG, BMP , WEBP, etc.
Conclusion
In addition to these 6 SVG editors, there are others, but few offer more functionality than the five shown above.
If you want to get serious about SVG and these tools don't have the functionality you need, you can always download a desktop SVG editor like Illustrator or Inkscape. However, for ease, speed and flexibility, all of the above editors offer a useful set of features.
PS: You can also try Figma. It's more of a UI creation tool than an SVG editor. However, it has an excellent set of tools and generates well-optimized SVG code.
