Today we’ll talk about SVG, what kind of format it is, what it’s used with, and whether it’s worth using. Although the format is not particularly new, it has earned its popularity thanks to its implementation. All latest versions of browsers have already received support for this format.
Why is he so popular? And what exactly makes it different from others? Today we will answer these questions and also tell you what you need to know to get started working with these file types.
What is SVG?
SVG – Scalable Vector Graphics – is a vector-based format for web developers. This type format has become so popular due to the fact that its images can be displayed at high resolutions without loss of quality, since SVG is vector format.
The impetus for the development of this language markup was first given by the Consortium World Wide Web(World Wide Web Consortium), which was better known in 1999 as W3C. W3C gave the concept of SVG - a markup language for creating two-dimensional graphical interfaces and images.
Use in practice
What makes SVG so popular and why are more and more designers starting to use it? It's very simple, it works as it should.
SVG is lightweight compared to other formats. This format has incredible possibilities. Flags, symbols, interface elements. And this is just a small list of how it can be used. The biggest advantage of using it is that it is a vector format, that is, it can be used on any display - whatever their resolution, it will be displayed the same everywhere.
SVG files are quite easy to manage since its files are saved as a static image. You can add interactivity to your website by making very simple but beautiful animations using SVG.
A few examples of where it can be used:
- Logos
- Background image
- Use as a button
- Cards
- Diagrams or drawings
As a rule, SVG is most often used when creating responsive websites, animations and other dynamic effects.
Pros of using SVG
So why should we abandon the usual JPG or GIF in favor of SVG? There are quite a few reasons why you should still use it in your project.
- SVG is a vector format, which is why it is worth using for responsive sites where the size of images depends on the user's display resolution, and SVG fits the bill flawlessly.
- SVG images use XML to define their properties, and therefore have the ability to be even more compressed.
- SVG images are very easy to manipulate, and this opens up even more possibilities for designers who can change colors, add shadows, filters, blurs and many more effects.
- SVG is pretty easy to understand
- SVG works with open web standards
- You can use regular text editor code to create SVG. This gives you some freedom in your actions, it all depends on your needs and the level of expert knowledge in this area.
Cons of using SVG
You're probably shocked at how many benefits SVG has. And perhaps they thought that it had no downsides. But no, there are definitely a couple, and here are some of them:
- There is no support for older browsers such as Explorer 8 and below.
- SVG cannot be used in photographs as it is a vector format and is used to create various shapes and lines.
What's next?
The future of SVG is just beginning. As an accepted image format (and standard) for mobile, SVG will only continue to gain momentum.
Hello everyone, our dear fans of free conversion. Today we have an interesting project on our desktop, codenamed Scalable Vector Graphics or SVG for short. Why on foreign language? So that no one would guess.
To conduct the research, we will need some material resources, including some kind of freely convertible currency, possibly rubles.
Secondly, we need a computer monitor, it doesn’t matter whether it’s a desktop or a smartphone. Since you are reading this text, it means that you already have one resource. All that remains is to bother some of the good people who happen to be nearby and borrow a few thousand rubles, or at worst, a couple of hundred bucks.
All this is absolutely necessary for us to clearly understand what SVG is and what is best to use it with.
Scalable vector graphics
Let's start from the outer shell, move on to the internal content and then, let's not be afraid of this word - let's penetrate into the very essence of the phenomenon under study.
As you may have heard, there are two types of graphics.
Start by taking off your glasses and moving your eyes closer to the flickering computer monitor.
What do you see?
That's right - the picture is made up of millions of multi-colored dots. That's what it is raster. That's why this type of graphics is called "raster".
Let's move on to the second part of the experiment. Believe me, you will have a lot more fun, and maybe even find yourself some adventures.
Wear your most fashionable clothes, call your friend or girlfriend. We're going to a nightclub. For what? Study vector graphics.
When the guests have warmed up properly at the bar and dancing with tambourines begins on the dance floor, the DJ presses a small button and clouds of translucent glycerin smoke fill the sky.
When the smoke thickens enough, the DJ presses another button. The laser gun is launched and something like the northern lights begins to dance over the heads of the dancing crowd.
This is vector graphics. The laser beam is continuous and draws pictures according to the computer program algorithm - digital visual image.
This is exactly how SVG works - it is a digital software description of graphic images, colors and their behavior.
It was not for nothing that we chose a nightclub as an example. The point is that the laser creates continuous lines, but glycerin smoke has a dispersed, raster texture. That is, this artificial fog consists of tiny droplets of liquid suspended in the air, from which a laser beam is reflected so that visual images are formed in the retinas of our eyes.
On computer screens, continuous vectors are transformed into multi-colored matrix pixels and our brain, according to its own algorithm, forms the perception of a smooth picture.
Technology Solution SVG
Well, we’ve sorted out the outer shell, now let’s move on to the inner essence of the phenomenon. You can say - why do we need all this science, it’s better to say directly - why is it needed, this SVG?
Take your time. The fact is that it is technology that determines all external effects. Now let's tell you a terrible secret. SVG is a sibling of the hypertext markup language HTML, which is used to create beautiful and dynamic websites.
That's right, an SVG graphics file is an XML text file filled with HTML-like tags and data structured using XML. It is logical to assume that SVG graphics can be integrated directly into the HTML code of a web page, formatted using tables CSS styles and even connect Javascript program scripts.
Just let your imagination run wild (maybe a cappuccino, please) and try to provide the endless possibilities of vector graphics genetically modified with HTML5 tags.
- Firstly, vector graphics, by definition, are scaled without loss in image quality (because there are no pixels and when enlarged, the image will not turn into a painting by a cubist artist).
- Secondly, SVG is fully compatible with web technologies and therefore becomes an organic part of websites.
- Thirdly, by adding objects to the digital description of the picture and connecting Javascript scripts to them, we make the image interactive, that is, responsive to certain user actions with given responses.
- Fourthly, SVG is a text format, so you can optimize the file for SEO without external meta tags by directly entering keywords into the image code.
Based on these technical specifications, we will deduce the scope of SVG.
How you can use SVG to your advantage
In the principles of fair marketing, it must be admitted that SVG does have its drawbacks. As the image detail increases, the file weight begins to increase at the speed of an avalanche.
So, unfortunately, SVG is completely unsuitable for realistic high-resolution photographs and detailed terrain maps.
The SVG format is optimal for small, but scalable and interactive images.
- Navigation bars and buttons with animated effects.
- Logos that do not lose image quality when enlarged or reduced.
- Images that are like rubber adapt to any format and resolution computer screen. SVG is indispensable for responsive Mobile-Friendly sites.
Most useful - SVG graphics are best suited for e-commerce.
For example, an image of the product being sold is posted on the website of an online store. The user can click on individual parts of the image and a beautiful animation begins, turning the image into something else.
On this basis, you can develop an interactive overview of the product from all sides and even from the inside.
Or on a medical website, using this graphics program you can do a pregnancy test. Or a diagnostic plugin for those who want to undergo a rapid analysis and find out what they will die from young.
After the client learns the terrible secret about his terrible illness, the hand itself reaches out to click the mouse on the adjacent section of the SVG image with the red button “Buy a cure for all diseases.” One tablet is enough. Price$1000.
What a useful invention this SVG is.
Methods for converting to SVG
On our website we offer you conversion using various methods:
Is there any way to reduce the size of the SVG?
Yes! Using special programs such as SVGO, or on our website using the SVG optimization function.
Our service is built on the use of open components, in particular SVGO. With this SVG optimizer you can reduce the size of SVG images by removing necessary information, such as:
- clearing attributes from new lines and repeating objects;
- deleting document type description;
- removal of XML instructions;
- deleting comments;
- remove metadata;
- and other pieces of information.
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, therefore fast loading web pages require a small size of graphic images embedded in them. The latter is achieved by optimal choice format graphic file, 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, optimization possibilities are not unlimited, and high-quality images tend to have an impressive volume, so achieving High Quality presented in web images with their small size still remains a serious problem.
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 graphic information you have to use a variety of file formats and different technologies for creating them. For static graphics, GIF, JPG or PNG formats are used, which can be created in a variety of graphics packages. For animated objects, animation GIF and Flash formats are used, and such objects are developed in specialized software applications(specific for each of the named format types). 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 as a set 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 this moment The SVG 1.2 specification is being developed (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 different kinds 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 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 size files 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 greater flexibility for use in web images gradient fills high resolution, shadows, filters, etc.;
- 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 a browser, users are forced to additionally install this opportunity third-party plugin, such as 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 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 Opera browser, supporting 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 as part of its released Firefox browser 1.5 includes the Mozilla SVG project module, which provides viewing of SVG graphics of the 1.1 specification. In addition, in mid-2005, developers began active work to introduce support for SVG 1.1 Safari browser, operating on computers running Mac OS X;
- Compared to other graphic formats, the SVG format is still poorly supported by graphics software developers, although such leading graphics packages 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 means of quickly visual development graphics in Scalable Vector Graphics format with the ability to edit the corresponding image in the same environment program code, however, 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 versions 4.0 and higher, Netscape Navigator or Communicator versions 4.5 to 4.78 (except versions 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 aimed at working with vector graphics and at the same time allowing you to export images to 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. WITH full list 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), part of the CorelDRAW Graphics Suite 12, provides import and export in SVG and SVGZ formats on 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 vector images obtained in it can, if desired, be exported to SVG format, and therefore Mayura Draw can become 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 handy tool to create 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 has a convenient, intuitive and easily customizable user interface, provides a wide range of tools, It has high speed work, 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. with their own functionality working with vector images, as well as the 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 various examples of use, and in addition, this application 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 overlays 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 view 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 options for an attribute or property of an object, they can be moved to other areas of the storyboard for purposes of automatic settings 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. Automatically check for changes to source code helps to achieve guaranteed 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.
The full name of the svg format is Scalable Vector Graphics. Essentially this is Text Document with XML markup, which can be viewed using the Notepad++ application. It was originally developed as a vector image format for use on websites, but soon migrated into “everyday life”. In addition to static graphics, there is support for animated ones. An image is made up of several shapes that can be moved, grouped, and masks, filters, and effects applied.
How to open a file with the SVG extension
- – powerful free application to view images. It has a basic set of photo editing - it allows you to apply effects, change contrasts, and the saturation of certain colors. More than 50 formats are supported, the application has a clear and simple interface.
- – Free analogue of CorelDraw. It has a simple interface and wide functionality. Allows you to view, edit and create both vector and raster images. An excellent feature is working with clones, thanks to which you can create various complex patterns.
- – free browser, which represents universal application for surfing the Internet, web development, listening to music and watching videos, and much more. It has a simple interface, wide functionality is easily expanded using plugins. It has an algorithm for checking downloaded files and has a list of unwanted sites.
- – free browser. It has a simple and intuitive interface, latest versions suffered drastic changes in the interface. Like any modern browser, it has a built-in file downloader, can play video and audio, and view images.
- is a free browser that is quite popular among users of the CIS countries. Until definitely it was considered the most fast browser. Allows you to view videos and images, listen to audio, built-in antivirus to check downloaded files, has a convenient customizable express panel on which you can place the most frequently visited sites.
- – free photo editor, oriented towards raster images, but vector is also supported. Layers, masks, overlay effects, changing the brightness and saturation of certain colors are supported. The application interface is simple and clear, you can do it one-to-one like in Adobe Photoshop.
