Menu
homeWindows 7

How to create an SVG file. How to work with SVG. What do you need to know in practice? What is SVG

We figured out what types of images there are and what files, and found out that it was created for hand-drawn video special file svg.

It is difficult to find it on the Internet since it is created in certain programs and it opens with them, and it looks like this:



This file, as I said in the previous article, was created for hand-drawn video programs. With its help, hand-drawn videos become even more attractive.

The file allows you to both draw with contours and draw without contours.

For example, drawing in the program PNG file and drawing without outlines using an SVG file:


And in this example you will see how the file looks and is drawn using outlines. The SVG file was made using vector rasterization in the Inscrabe program,

Don't judge too harshly, as this was just a test. In this program you can make better graphics, this was my first try, but I want you to understand that a raster image is always brighter and more colorful.

It works well to rasterize images with a clearer outline into vector graphics.

To create these files there are many programs, graphic editors, both paid and free. There are portable ones that do not require downloading on HDD, and there are also online sites

A site that will help with conversion to any file, but only works in black and white:

The download will start automatically, but your antivirus may tell you that this kind of file is dangerous for your computer. My antivirus complains about all rare files.

The second online site that I found on the Internet

This site is a little more complicated and displays files in color. In this case, you can choose the number of colors yourself. And on this site you can also make svg to create a drawing without outlines. I advise you to upload the site to Google and do the translation, since it is English, but you can figure it out.

I think everything is clear with online sites, let's see what we can find from the programs.

Adobe Illustrator one of the most common and famous editors. It is paid, but nothing is impossible; it can be found both free and also in Russian. There are also countless lessons and courses on working with it, both free and paid.

The files produced in it are of high quality and work perfectly with the Explaindio program

Of the entire list, only Inscape is a free graphics editor. It is not a bad analogue to a program such as Adobe Illustrator.

I’ll tell you the truth, I haven’t tried to work in Corel.

In Vector magic, you can convert any image into other files; it is more of a converter than an editor. But not bad enough.

So we got acquainted with the SVG file. A new language that appeared only in the early 2000s, but is confidently beginning to take its place among web developers and designers.

I'm waiting for you at my place. Until next time.

With respect to you Valentina Dudnichenko.

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 keep in mind: different support browsers. 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 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 one alternative way 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

By analogy with img tag, SVG can be used as background image:

.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 background-size as values keywords, for example contain, so that the image completely occupies the entire element.

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

Modernizr can help us even more here effective way than in the case of 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 HTML tag if the browser doesn't 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 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, all by by and large garbage. SVG is pretty light weight by default, but why not make it even smaller? Peter Collingridge provided online tool to optimize 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? It's because they both are 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. Please 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 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 The URI is a way to reduce the weight of the 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!

Preparing SVG for use on the web is a very simple process, not more difficult JPEG export 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 SVG processing it's 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. The convenience of SVGO is also that it can be included in the process automatic assembly project, but you can also use GUI if you want.

Understanding in more detail with correct removal everything unnecessary, we can do something else in 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 delete everything unnecessary points. Illustrator has a VectorScribe plugin with a Smart Remove Brush Tool that will help you remove points while keeping the overall shape the same.

Preliminary optimization

Smart Remove Brush Tool removed points

Next we will enlarge the image. In Illustrator, it's convenient to turn on the pixel grid preview View > Pixel Preview 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 is a certain order, which depends on the object below, so it's worth putting the top object at the bottom of the file in the 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 great in all modern browsers, 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 site. 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 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

Although you can create an SVG document using any text editor, vector illustration programs such as Adobe Illustrator or Inkscape are typically 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: