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 best! 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.
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.
To design any web page, you need both static graphics and a variety of animated and interactive elements, which, firstly, make the information presented on it more attractive, and secondly, contribute to a better perception of the material.
Graphic information is transmitted much slower than text information, and the loading time of images is directly dependent on the size of their graphic files, so fast loading of web pages presupposes the small size of the graphic images embedded in them. The latter is achieved through the optimal choice of graphic file format, as well as through optimization, the task of which is to find a compromise between the page loading speed and the quality of the images presented on it. However, the optimization possibilities are not unlimited, and high-quality images tend to be large, so achieving high-quality web images in small sizes remains a major challenge.
But the question is not only about size and quality - developing a design for a web page turns out to be a matter that requires the designer to know a wide range of diverse technologies and software products, since for different types of graphic information it is necessary to use various file formats and different technologies for their creation. For static graphics, GIF, JPG or PNG formats are used, which can be created in a variety of graphics packages. For animated objects, the animation GIF and Flash formats are used, and such objects are developed in specialized software applications (specific for each of these types of formats). Interactive elements (rollovers, ImageMap links, etc.) are also, as a rule, created in specialized applications and represent a set of graphic images, the connection between which is established in a file with HTML code that complements them.
A successful solution to these problems could be the transition to the SVG (Scalable Vector Graphics scalable vector graphics) graphic format, based on the XML language, thanks to which any SVG image can be represented by a set of command lines (Fig. 1), and the SVG file itself can be opened in any text editor, including Notepad. This relatively new technology was originally developed by Adobe specifically for the web, and today is of great interest for mobile devices, providing the creation of high-quality static, animated and interactive graphics. Therefore, it is not surprising that it is actively supported by the W3C consortium (http://www.w3.org/Graphics/SVG) in 2003, the SVG 1.1 standard was adopted by the W3C as a recommendation, and the specification is currently being developed SVG 1.2 (http://www.w3.org/TR/SVG12/).
with the corresponding image
SVG technology allows you to combine text, graphics, animation and interactive components in one format and is based on three types of graphic images: vector shapes, pictures and text. Shapes, as is customary in vector graphics, are represented either by rectilinear and curvilinear contours, or graphic primitives (rectangles, ellipses, etc.), and drawings are imported raster images. In addition, the SVG format supports various types of animated (reminiscent of GIF and Flash animation) and interactive objects, such as rollovers, link maps, and other navigation elements. And since this standard is based on the XML language, the SVG file, along with elements intended for visual display, can also contain various metadata.
Pros and cons of using the SVG format
Using the SVG format allows you to develop smaller, faster-loading, high-quality, versatile graphics for the web and mobile devices that no other graphics format can provide. The main advantages of the SVG graphic format include the following:
- high quality of images regardless of their size, which is explained by the vector nature of the SVG format. Images can be indefinitely reduced or enlarged without loss of quality (Fig. 2) in accordance with the size of the display, which allows you to obtain high-quality images of graphic information on various types of devices (desktops, pocket computers, etc.), and also makes it possible to more carefully examine individual details this is important, for example, when working with technical drawings;
- much smaller file size compared to GIF, JPG, PNG and animation GIF formats, and even more so with the Flash format. For example, if the GIF file tested for the article, compressed in LZW compression mode, was 26 KB, then the size of the corresponding SVG file took 1220 bytes, and when compressed in the SVGZ format it was only 685 bytes.
But it's not only that. Compared to traditional options for graphically representing the Web, the use of the SVG format has many other undeniable advantages.
So, for developers the important advantages are:
- the ability to combine static, animated and interactive elements in one format, as well as a combination of vector and raster objects;
- improved text handling, including kerning, curved text and unlimited font use;
- more efficient control of color accuracy and the widest possibilities for using high-resolution gradient fills, shadows, filters, etc. in web images;
- the textual nature of the SVG format and its support for cascading style sheets, which greatly simplifies the process of updating a website and allows, if necessary, to make changes to it without resorting to special programs;
- integration with databases built on XML (Extensible Markup Language) and CSS (Cascading Style Sheets) standards, which allows you to save SVG images in the database and create dynamic web pages using them - different for different platforms, personal settings, etc. d.;
- no indexing problems SVG files are indexed by any search engines (unlike, for example, SWF files).
Users will enjoy high-quality, fast-loading SVG content. In addition, it is possible to copy the text located on the SVG image, and thereby save some useful information for yourself, as well as search for text in the image, which in some cases may be extremely necessary, for example, when searching for the desired name on a map or drawing .
However, as usual, along with the advantages, SVG technology also has disadvantages, and very serious ones.
- SVG images are poorly supported by Internet browser manufacturers. As a result, to view SVG graphics from the browser, users are forced to additionally install a third-party plugin that provides this capability, for example SVG Viewer from Adobe. In theory, this is not difficult; the corresponding plugins are easy to install, free, small in size, and can be quickly downloaded from the Internet. In practice, everything turns out to be much more complicated, since most Internet users are not aware of the existence of these capabilities and therefore cannot view this type of graphics; without the plugin, it is simply not visible. However, the situation is gradually changing, and in the past year two leading web browser developers have introduced support for the SVG format. In the spring, Opera Software released version 8 of the Opera browser, which supports SVG 1.0 Tiny; in the version of Opera 9.0 that appeared a little later, partial support for the SVG 1.0 Basic format was implemented. The second developer to include SVG support was The Mozilla Organization. The Mozilla SVG project module, which provides viewing of SVG graphics of the 1.1 specification, was included in its Firefox 1.5 browser. In addition, in mid-2005, the developers of the Safari browser operating on computers running Mac OS X began active work to introduce support for SVG 1.1;
- Compared to other graphic formats, the SVG format is still poorly supported by graphics software developers, although leading graphics packages such as Adobe Illustrator, Corel DRAW, etc. allow you to export graphics to SVG files. Of course, SVG files can be created in any text editor, but this is not practical in terms of speed and cost of development. It is convenient to edit a file in a text editor if necessary (which, by the way, is only possible if you have deep knowledge of XML technology), but creating it from scratch is unwise, since it will require excessive time and effort. To do this, we need simple and convenient tools for rapid visual development of graphics in the Scalable Vector Graphics format with the ability to edit the program code corresponding to the image in the same environment, but there are very few such products and they are not well known.
As a result, a very sad situation arises: many users cannot yet view SVG graphics due to the lack of support for it in web browsers at the proper level, web developers practically do not develop SVG graphics, no matter how attractive they may be, and software developers do not indulge web designers with a variety of applications focused specifically on SVG. The result is a vicious circle: “If there is no content, then people do not need an SVG implementation, and if there is no implementation, then there is no content” this is exactly how the situation was described at one of the W3C consortium meetings.
But you can look at the situation from the other side: the support of SVG (although not yet in full) by two popular Internet browsers, as well as the interest in the technology of famous developers, suggests that “the ice has broken” and that SVG has a real a chance to become one of the popular formats for presenting web information. This chance is increasing due to the growing interest in SVG technology in relation to mobile devices, where the requirements for image size and quality are much higher. Opera Software, for example, plans to first implement full support for the SVG format on desktops and only then transfer it to mobile platforms. Therefore, it’s time for web designers to think about using SVG, otherwise they risk being left behind in the near future.
Plugins for viewing SVG graphics
As already noted, for now, most users will have to use one of the suitable plugins to view SVG graphics in full in an Internet browser window, the most famous of which are the free Adobe SVG Viewer and Corel SVG Viewer modules. The first of them, Adobe SVG Viewer, comes as a separate application, is compact and convenient, works on different platforms, supports a large number of Internet browsers, and is therefore much more popular among users. The Corel SVG Viewer application is included in the Corel Smart Graphics Studio package, but is also available as freeware.
There are other options for viewing SVG graphics; you can, for example, use the corresponding modules from the Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/batik) packages, KDE KSVG (http://www.kde.org), etc. A complete list of applications that provide viewing of SVG images is given at: http://wiki.svg.org/Viewer_Implementations.
Adobe SVG Viewer
Developer: Adobe Systems, Inc.
Distribution size: 2.25 MB
Distribution method: freeware (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)
Price: for free
Work under control: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris
Browser support: Internet Explorer 4.0 or higher, Netscape Navigator or Communicator 4.5 to 4.78 (except 6.x)
Corel SVG Viewer
Developer: Corel Corp
Distribution size: 4.9 MB
Distribution method: freeware (the module can be downloaded from: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)
Price: for free
Work under control: Windows 98/NT/2000/Me/XP
Browser support: Microsoft Internet Explorer 5.5 and higher, Netscape Navigator or Communicator versions 4.79, 7.02
Programs for creating SVG graphics
All programs for creating SVG graphics can be divided into three large groups. The first includes popular two-dimensional graphics packages that are focused on working with vector graphics and at the same time allow you to export images to the SVG format. The most popular of them are Adobe Illustrator and CorelDRAW; in addition, such export to one degree or another supports many other applications: AutoCAD, Microsoft Visio, etc. The main advantage of this group of applications is that they have advanced tools for creating vector images and allow you to achieve unique effects through the use of transparency, gradient fills, various filters, etc. But these applications require serious special training and therefore are mainly designed for professional designers. In addition, they are by and large not focused on SVG design (although they allow you to obtain graphics in the Scalable Vector Graphics format) while providing convenient visual creation and display of images, these applications do not allow them to be adjusted at the text level, which is relevant for SVG- graphics. It is also significant that support for the Scalable Vector Graphics format is not fully implemented in them, as a result of which not all vector image elements can be exported to SVG without errors.
The second group of software products consists of packages designed exclusively for creating SVG graphics. They have much less capabilities in terms of visual development of vector images, although they include all the necessary tools. But they provide convenient tools for editing source code and allow you to work with SVG objects in parallel, both visually and at the code level, and you can easily switch between these options for presenting information. All applications from this group are very simple and accessible and do not require much time to learn. In addition, they have relatively small distributions (compared to applications of the first group), so they can be purchased via the Internet without any problems. However, there are very few programs with such capabilities, and below we will consider in detail only four that are of the greatest interest and designed for different categories of users. A complete list of applications available for creating SVG graphics can be found at: http://wiki.svg.org/Design_Tools.
And finally, the third group can include any text editors, including a regular notepad. As noted above, the Scalable Vector Graphics format is based on the XML language, which allows you to create and edit SVG files at the text level in a text editor if necessary.
Full-featured graphics applications that let you create SVG graphics
Adobe Illustrator CS2
Developer: Adobe Systems, Inc.
Distribution size: Macintosh version 428.9 MB, Windows version 398.6 MB
Distribution method: shareware (a 30-day demo version of the package is available at: http://www.adobe.com/products/tryadobe/main.jsp#product=27)
Price:$665
Work under control: Windows 2000 with Service Pack 3 or Windows XP, Mac OS X versions 10.2.4 to 10.2.7, Java Runtime Environment 1.4.1
Starting from version 9, Adobe Illustrator (Fig. 3) has implemented the import and export of SVG files, and at a much higher level compared to similar graphic applications. The package supports all existing SVG specifications, ISO 8859-1, UTF-8 and UTF-16 encodings, various text export options and allows you to export images in both regular SVG format and compressed SVGZ.
In the SVG graphics created in its environment, you can use gradients, transparency, as well as a whole series of specially designed SVG effects (Effect=>SVG Filters) in the form of various shadows, blurs, etc. Images with such effects remain clear when viewed in web browser with any magnification. In addition to static graphics, Illustrator also allows you to create interactive graphics in SVG format; for this purpose, a special SVG Interactivity palette is provided (it can be opened from the Window=>SVG Interactivity menu), in which actions for interactive objects are specified. It's worth noting that working on interactive SVG elements in Illustrator requires knowledge of Java Script and an understanding of the basic principles of object-oriented programming. In addition, using the Scalable Vector Graphics format in this program, you can create Dynamic Data-Driven Graphics.
CorelDRAW Graphics Suite 12
Developer: Corel Corp.
Distribution size tiva: 200 MB
Distribution method: shareware (the demo version can be downloaded from online store sites, for example at: http://allsoft.ru/Download.php?ver=17605)
Price:$290 (Allsoft.ru)
Work under control: Windows NT/2000/XP
The well-known application for developing professional vector graphics, CorelDRAW (Fig. 4), included in the CorelDRAW Graphics Suite 12, provides import and export in SVG and SVGZ formats at a basic level, and therefore can be used to create static and interactive SVG graphics.
to an SVG file in CorelDRAW
The application supports unrecognized data, attributes and metadata, and also provides the ability to preview SVG files in the browser before exporting. In addition, Unicode encoding is possible for UTF-8 and UTF-16 encoding methods and various options for exporting text and bitmap images. The latest version has significantly improved support for exporting symbols, text, shadows, outlines, layers, embedded binary images, etc.
Mayura Draw 4.3
Developer: Mayura Software
Distribution size: 1.3 MB
Distribution method: shareware (demo version http://www.mayuradraw.com/mdraw.zip)
Price:$39
Work under control: Windows 95/98/Me/NT/2000/XP
Mayura Draw (Fig. 5) a very simple and cheap vector graphics creation program designed for the general user. The resulting vector images can be exported to SVG format if desired, and therefore Mayura Draw can be a possible solution for developing static SVG graphics. The program supports all the main vector graphics tools and allows you to obtain vector images based on graphic primitives, linear and curvilinear contours and text. The list of its capabilities includes convenient means of aligning, distributing and organizing objects, managing transparency, using guides and rulers for precise placement of objects, and various transformations.
Specialized packages for creating SVG graphics
EvolGrafiX XStudio 6.1
Developer: EvolGrafiX
Distribution size: 7.25 MB
Distribution method: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)
Price:$449 commercial license, $249 academic license
Work under control: Windows 2000/XP
The professional package XStudio (Fig. 6) is a convenient tool for creating diverse SVG graphics for the Web and mobile devices and provides full control over both the SVG project as a whole and over vector images, animation, scripts, etc. The application is convenient , has an intuitive and easily customizable user interface, provides a wide range of tools, is fast, allows you to create SVG graphics of all existing specifications and supports all Scalable Vector Graphics styles. All this, combined with a relatively low price for a professional package, allows us to consider it the best professional solution of its kind. XStudio comes with detailed documentation, supported by a series of tutorials, and is easy to learn.
Rice. 6. Combining visual image creation with source code editing
in EvolGrafiX XStudio
The application has all the necessary capabilities for creating and processing vector images and in this regard is very similar to the Adobe Illustrator package. At the same time, XStudio is focused directly on the preparation of static, interactive and animated SVG graphics and therefore, along with classic tools for working with vector objects, it is supplemented with specific SVG capabilities. The built-in Document Object Model (DOM) toolbar provides a hierarchical representation of SVG objects, a convenient XML editor allows you to correct the source code at the text level, and a script editor allows you to supplement it with Java scripts. Working with code is organized very conveniently: code fragments of the selected object are automatically highlighted, it is possible to search for text and set bookmarks, etc. Any code changes are instantly reflected in the visual viewing window, and visual changes are reflected in the editor window.
Inkscape
Developer: IOSN (International Open Source Network International Open Source Network)
Distribution size: 8.7 MB
Price: for free
Work under control: Windows 9x/NT/2000/XP, Mac OS X, Linux
Inkscape (Fig. 7) is the most promising vector editor based on the Open Source model, which is multi-platform and is a powerful tool for developing graphics in accordance with the Scalable Vector Graphics standard. In its functionality for working with vector images, as well as its interface, Inkscape is very similar to CorelDRAW. It supports alpha channels, working with layers, using flowing text, spectacular gradient fills, a large number of filters and effects, various transformations, convenient work with paths and objects, grouping objects and much more. You can import data from JPEG, PNG and TIFF files and embed them into SVG images.
built-in Inkscape editor
However, unlike CorelDRAW, Inkscape is positioned as an application for SVG designers, therefore, along with classic visual graphics creation, it provides the ability to directly process XML code in the built-in text editor. The program is configured to save images in regular and compressed SVG files, although they can be converted to common vector and raster formats if desired.
The Inkscape package has a convenient Russified interface, is easy to learn and comes with a good help system, including a variety of examples of use, and in addition, this application is free - all this makes it very attractive to a wide range of users. The main disadvantages of the program are its low operating speed and increased requirements for system resources.
Corel WebDraw
Developer: Corel Corp
Distribution size: 15.6 MB
Distribution method: shareware (30-day demo http://www5.jasc.com/pub/wdw102ev.exe)
Price:$179 download version, $199 CD version
Work under control: Windows 98/NT4/2000/Me/XP
Corel WebDraw (Figure 8), better known as Jasc WebDraw, is a comprehensive solution for creating high-quality SVG graphics and animations aimed at professional designers. And the intuitive interface of the program makes it attractive to a wide range of users.
The application provides an extensive set of standard graphic tools typical for a full-featured vector graphics application: basic shapes (ellipse, rectangle, star, etc.), pen, polygon, polyline, text, etc. Along with vector objects, WebDraw allows you to supplement SVG objects with external raster images. In addition to regular fills and overlaying ready-made styles, you can use complex gradients, fills, including patterns created by yourself. To get more effective images, you can use filters, both quite simple (blurring and shadowing) and complex (texturing and lighting). Grids, guides, and rulers help you place objects precisely, and the built-in Document Object Model (DOM) toolbar presents SVG objects in a hierarchical tree for easy management.
WebDraw is equipped with a universal animation storyboard line, Animation Timeline, which is built on the basis of the SVG DOM (Document Object Model), which allows you to select and animate almost any attribute or property of an object of all types at any time. The drag-and-drop mechanism allows you to edit the start and end points of the animation, as well as the duration of each animation phase, directly in the timeline. Because animation keytimes are inserted every time you set animation parameters for an attribute or property of an object, they can be transferred to other areas of the storyboard to automatically adjust the distribution of animation effects over time.
The package allows you to work with SVG graphics in two versions: both with a set of visually displayed graphic objects and with the corresponding source code. Editing source code in the built-in SVG file text editor provides additional flexibility and control over file content. Automatic checking of changes in the source code helps to ensure the correct behavior of the created graphics, and found errors are marked in color, which saves the designer from hours of searching through hundreds of lines of code. The result of any changes in the source code is immediately displayed on the screen. If desired, you can import, edit and optimize SVG files created in other applications into WebDraw.
Sketsa SVG Editor 3.2.3
Developer: KIYUT
Distribution size: 5.99 MB
Distribution method: shareware (demo that adds a tag to an image, http://www.kiyut.com/products/sketsa/sketsa.zip)
Price:$49
Work under control: Windows 2000/XP, Java VM (JRE) 1.5 and higher (http://www.java.com/getjava), UNIX and Linux
The Sketsa application (Fig. 9) is one of the most popular SVG editors and allows you to create professional SVG graphics, including optimization in the SVGZ format. The package successfully combines simplicity and ease of use with a wide range of features and is compatible with Windows, Mac and Linux systems.
Sketsa supports a classic set of tools typical for any vector application, allowing you to create and transform any vector objects based on both contours and graphic primitives and text, which, if desired, can be easily supplemented with raster images. You can control transparency, use gradient fills and filters. All this is successfully complemented by specialized SVG capabilities, thanks to which any image can be edited not only visually, but also in text mode. To edit SVG code, the package provides a built-in XML text editor. For ease of object management, there is a built-in Document Object Model (DOM) toolbar, which is a hierarchical tree-like set of objects in an SVG document, which allows you to select any document object to edit its properties.
Vector formats for presenting graphics provide tremendous opportunities for designers and artists, but the presence of many proprietary formats in various graphic editors creates serious difficulties when exchanging files.
It can be a real problem for you to convert, for example, SVG to AI or PDF to AI format in order to be able to work in a familiar format. Another option is possible when you are asked to submit your work in a format that your graphics editor cannot export to, for example, you may need to convert the AI format to an SVG vector. But with our service this is not a problem and we offer you an online converter that can convert vector graphics of the following formats: AI, CDR, CDT, CCX, CMX, SVG, FIG, CGM, AFF, WMF, SK, SK1, PLT, DXF, DST, PES, EXP, PCS.
With our online service, you will forget that the task of converting a vector into another format could cause any difficulties. To convert, for example, eps to ai, you just need to select a file on your computer or specify a link to it, then select the required format and click the “convert” button. In a few seconds you can download the vector in the required format from our website to your computer.
To convert graphic vector files, our online converter uses the UniConvertor package, which supports most vector formats. Conversion of files in the vector format of the Corel Draw package (CDR) is implemented using the LibreDraw graphics package, which provides high-quality work with the format, and you can get acquainted with it in more detail by studying our material “Conversion from CDR (Corel Draw)”. You may also be faced with the task of converting a raster to a vector, for example, you need to convert jpg to ai or png to ai, which you can also easily do on our service. You just need to specify an image in raster format as the source file, select the vector format that you require, and our converter will perform this conversion for you in a few seconds. Our service uses the Potrace software product as a raster to vector tracer program. You can learn more about the capabilities of the Potrace tracer in our article “Converting a graphic image into vector format”. With our service, you can always freely convert vector images between formats without worrying about installing additional software on your computer.
Supported vector graphics formats:
| Reading: | Entry: |
|
|
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.
