Draw a diagram in the browser html svg. How to make your own SVG images

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 a 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. The 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 site by doing help SVG very simple but beautiful animation.

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 lot of 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 a regular text code editor 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.

SVG is an image format for vector graphics. Literally, this is nothing more than scalable vector graphics. That is, this is exactly what you work with in Adobe Illustrator. Using SVG in web development is fairly easy, but there are some features worth considering.

What is SVG used for?

• Small file size that compresses well
• Scaling to any size without loss of quality
• Looks great on retina displays
• Full design control in interactivity and filters

Let's draw something for the upcoming work in Adobe Illustrator. Let's take the Kiwi bird:

​

Please note that the canvas is trimmed exactly along the edge of the picture. An SVG canvas is constructed absolutely identically to a PNG or JPG. You can save the file directly from Adobe Illustrator as an SVG file.

​

Once you save the file, another dialog box will appear with SVG options. To be honest, I don't know much about all the settings presented in this window. There is a specification for SVG profiles, so if you are interested you can read it. I find SVG 1.1 works great.

​

The cool thing here is that you can either click OK and save the file, or click the “SVG Code...” button and a text editor will open with the SVG code.

​

Both methods can be useful.

Using SVG as an img tag

In Illustrator our canvas turned out to be 612px ✕ 502px.

How large the image will be on the page is up to you. You can resize an image by defining the width and height properties, in exactly the same way as with PNG or JPG. Here's an example:

Check out this Pen!

How to make cross-browser SVG

When using SVG in this way, you need to be aware of different browser support. Essentially, SVG works everywhere except IE8 and below, as well as Android 2.3 and below.

If you need to use SVG, but also need support from the above browsers, there are several options to solve the problem. I have used several techniques in various projects to solve this problem.

One way to check SVG support is Modernizr, which changes the src path:

If (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )

David Bushell came up with a very easy alternative, but it contains javascript in the markup:

The SVGeezy service can also help. As we continue with this article, we'll look at many different fallback methods for SVG support.

Using SVG as a background-image

Similar to the img tag, SVG can be used as a background image:

Kiwi Corp .logo ( display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; )

Note that we are setting the background-size to be exactly the same as the element's size. This must be done because otherwise we would see a small top part original image. These numbers take into account the original proportions of the image. You can also use keywords like contain as background-size values ​​so that the image fills the entire element.

Using SVG as a background image affects browser support, but in general, everything is the same as when using the img tag.

Modernizr can help us here in an even more efficient way than with img. The point is that if you replace the background image with a supported format, then only one will be executed HTTP request instead of two, as is the case with img. Modernizr adds the class name “no-svg” to the HTML tag if the browser does not have SVG support:

Main-header ( background: url(logo.svg) no-repeat top left; background-size: contain; ) .no-svg .main-header ( background-image: url(logo.png); )

If you're having trouble using the above two ways to use SVG, below are more ways to lay out vector graphics.

Using “inline” SVG

It was mentioned above that when saving a picture in SVG format, using the Illustrator editor you can get the correct SVG code (you can also open the file using a text editor and copy this code). You can copy this code into your HTML and the SVG will render exactly the same as using img.

This can be useful since the image image comes along with the code in the document and does not require an HTTP request. In other words, the benefits are the same as when using Data URI. However, there are also disadvantages. Due to insert insertion direct code SVG, the document is starting to look like a big bloated piece of crap.

There is also an option to insert SVG on the server side:

SVG optimization

Adobe Illustrator does not perform optimization actions by default on the resulting SVG image. It provides DOCTYPE and notes, and it's all pretty much garbage. SVG is pretty light weight by default, but why not make it even smaller? Peter Collingridge has provided an online optimization tool, SVG Optimiser. Using this service you can upload old file and get an optimized new one.

If you want more hardcore - no problem, here is a tool for optimizing SVG using server-side javascript Node JS tool https://github.com/svg/svgo

SVG styling

See how SVG is similar to HTML? This is because they are both XML data. In our design there are two elements that form the basis, these are the ellipse and the path. We can easily specify classes for them via HTML code.

Now we can control these elements using custom SVG CSS. This CSS does not have to be directly embedded in the SVG, it can be placed absolutely anywhere. note that SVG elements have special set styles that are created specifically to work with vector graphics. For example, not the usual background-color is used, but fill. Although some regular styles also work, for example:hover.

Kiwi ( fill: #94d31b; ) .kiwi:hover ( fill: #ace63c; )

SVG has fun filters. For example blur:

...

You can then apply this in css if needed:

Ground:hover ( filter: url(#pictureFilter); )

Here's what happened:

Check out this Pen!

Support for “inline” SVG in browsers

List of browsers that support this mode SVG displays can be viewed here http://caniuse.com/#feat=svg-html5. Again, there is no support in IE8 and Android 2.3.

One of the fallback options for this type of SVG:

...

Then we use Modernizr again:

Logo-fallback ( display: none; /* Make sure it"s the same size as the SVG takes up */ ) .no-svg .logo-fallback ( background-image: url(logo.png); )

Using SVG as an object

If using an “inline” SVG isn't your thing (keep in mind that there are downsides to this option, like lack of caching), you can bind the SVG to an object and then change it using css:

For cross-browser support we use Modernizr:

No-svg .logo ( width: 200px; height: 164px; background-image: url(kiwi.png); )

This option works great with caching and has the most browser support of all of the above. But to act with using CSS for such an object, you will have to write styles directly into the SVG file.

...

Using Data URIs is a way to reduce the weight of SVG. Mobilefish.com provides an online optimization tool for this purpose. Just paste the contents of your SVG file and fill out the form, then the result will be displayed in a text field that can be copied. It looks like this:

​

You can use this code anywhere! For example:

Logo ( background: url(data:image/svg+xml;base64,); )

And by the way, if you have an inline style in the SVG that is before base64, it will work if you use it as an object!

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 requires a small size of the embedded images. graphic images. 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 have knowledge of a wide range of diverse technologies and software products, since for different types of graphic information it is necessary to use a variety of file formats and various technologies 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 usually created in specialized applications and are 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) graphic format, based on 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 it is of great interest to 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 forms, drawings 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 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 graphical representation The use of the SVG format has many other undeniable advantages.

Yes, for developers important advantages are:

• the possibility of combining in one format the development of static, animated and interactive elements, as well as combinations of vector and raster objects;
• improved text handling, including kerning, curved text and unlimited font use;
• more efficient control of color accuracy and the broadest opportunities in terms of 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 using them dynamic web pages different for different platforms, personal settings etc.;
• 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 plugin from third party manufacturers, 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 one that appeared a little later Opera versions 9.0 provides partial support for the SVG 1.0 Basic format. 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. Moreover, in mid-2005 active work The developers of the Safari browser, which operates on computers running Mac control OS X;
• In comparison with others 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 tools for rapid visual development of graphics in the 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: SVG support (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 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 to think about using SVG and web designers otherwise they risk being among the laggards 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 is supplied as a separate application, is compact and convenient, runs on different platforms, supports a large number of Internet browsers and 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. 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 level. 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 program requires knowledge Java language Script and 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 provides support for 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 vector images, animation, scripts, etc. The application has a convenient, intuitive and easily customizable user interface, provides a wide range of tools, has high speed, 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 everything 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, big number filters and effects, various transformations, convenient work with contours and objects, grouping of objects and much more. It is possible to import data from JPEG files, PNG and TIFF and embedding them into SVG images.

built-in Inkscape editor

However, unlike CorelDRAW, the Inkscape package is positioned as an application for SVG designers, therefore, along with the classic visual creation graphics provide 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 use cases, 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 package (Fig. 8), better known as Jasc WebDraw, universal solution for creating high-quality graphics and animations in SVG format, 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 object model 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 initial and end point animation, as well as the duration of each animation phase. 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. Automatic verification of changes in source code helps ensure correct behavior 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.

Preparing SVG for use on the web is a very simple process, no more complicated than exporting JPEG or PNG. Use whatever graphics editor you're familiar with (Illustrator, Sketch, Inkscape [free], etc. [or even Photoshop if you're using shape layers]) at the image size you plan to use. I usually work in Illustrator, so I'll explain some of the ways to prepare files in that program, but they generally apply to any program. You might want to convert your text to curves, as the font will most likely render incorrectly, unless you plan to style them with the web font used on the page (which is possible!). It's also not a good idea to convert all objects into single shapes, especially if you have strokes that will need to be manipulated on the page, especially since converting objects often does not reduce file size. Any names assigned to groups or layers will be added to the SVG as an element ID. This is quite convenient for styling, but will increase the overall size file.

Before you export, you need to check that all images are in an integer pixel grid (that is, for example not 23.3px × 86.8px). Otherwise, most likely the image will not have enough clarity and part of the image will be cut off. In Illustrator this can be done as follows: Object > Artboards > Fit to Artwork Bounds. Then click save as and select SVG, and leave the default settings. There's a little optimization we can do here, but it's really not worth it since we'll be using various enhancement techniques later on, so we won't waste time on those tweaks for now.

Tricks for reducing file sizes.

(See optimization)

To achieve smallest size SVG, it would be logical to remove everything unnecessary from it. The most famous and useful program (at least I think so) for processing SVG is SVGO. She removes all required code. But! Be careful when using this program if you plan to manipulate SVG with CSS/JS, as it may clean up the code too much, making future changes difficult. SVGO is also convenient in that it can be included in the automatic project build process, but you can also use GUI if you want.

Understanding in more detail with correct removal everything unnecessary, we can do something else in the graphic editor. First you need to make sure that you use as few paths/shapes as possible, as well as points on those paths. You can combine and simplify everything that can be simplified, and remove all unnecessary points. Illustrator has the VectorScribe plugin with Smart tool Remove Brush Tool, which will help you remove points and still leave general shape Same.

Preliminary optimization

Smart Remove Brush Tool removed points

Next we will enlarge the image. In Illustrator, it's convenient to turn on View > Pixel Preview with a pixel grid and check how the outlines are positioned. It will take a little time to place the outlines on the grid, but the effort will pay off and result in cleaner rendering (it's best to pay attention to this in advance).

Points off grid

Align to Grid

If there are two or more objects to align, then it is worth removing all unnecessary overlaps. Sometimes, even if the contours are carefully aligned, a thin white line may be visible. To prevent this, you can slightly overlap the objects where they overlap. Important: in SVG, the z-index has a certain order, which depends on the object located below, so it is worth placing the top object in bottom part file in code.

And finally, last but not least, something that is usually forgotten is to enable gzip compression of SVG on your site in the .htaccess file.

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... etc

As an example of how effective this technique is, I'll take the original Breaking Borders logo and optimize it this way: increase the size to what it should be; I’ll put the contours in order; I will delete as many points as possible; move the points by integer pixels; I’ll move all the overlap areas and send it all to SVGO.

Original: 1.413b

After optimization: 409b

As a result, the file size became ~71% smaller (and ~83% smaller when compressed)

Scalable Vector Graphics (SVG) support works excellent in all modern browsers, and the image format appears in surprising contexts on many different web pages. But despite being the standard for nearly two decades, SVG remains a somewhat new format for some designers and developers, leaving them confused about how it should be used on a website. Here are some reasons why you should use SVG:

Tiny file size

Well designed, a typical SVG is much smaller than the equivalent PNG, meaning pages that use them load faster for users.

Scalability

Since SVG is built from mathematical formulas Rather than the fixed pixels of raster graphics, SVG images can be scaled up and down without losing quality, making them ideal for modern responsive sites.

Interacts with the DOM

SVG is sometimes referred to as "markup drawing": every element in an SVG image interacts with the DOM, meaning that CSS and JavaScript can manipulate parts of the SVG document. Unlike raster graphics, each individual shape in SVG can have its own ID or class.

Easy to modify and adapt

The quality of SVG components means that well-formed SVG documents can be easily modified in any text editor without the need for specialized programs required for raster images. And because SVG interacts with the DOM, its elements can be modified using CSS. The SVG format is perfect for displaying:

logos

• illustrations and drawings

Tools for working with SVG

While you can create an SVG document using any text editor, vector illustration programs such as Adobe Illustrator or Inkscape are generally the best choice (though it should be noted that other applications, including 3D programs such as Blender and server applications, can export SVG).

No matter what you use, you should know that creating SVG of the applications still sometimes leaves much to be desired: the resulting document is often recoded and sometimes poorly formatted. The .svg file can be made smaller, more compact, by processing it using an optimizer such as SVGOMG. Sometimes passing the wrong document.svg through the W3C validator can help you identify problems.

SVG integration

There are three main ways SVG can be used directly on a web page:

Because SVG is based on XML, it can be directly integrated into the code on your page. SVG code reduces wait time and total time loading your page.


Similar to raster images, SVG file you can refer to the tag or via CSS as a background image. This is often the best way if the SVGs don't need individual CSS and JavaScript attention.


Inserted as