What is SVG mean? Discover the perfect line word with us
Top

What is SVG?

Scalable Vector Graphics or SVG is a two-dimensional format of vector graphics which can be used on websites or in other graphic industry. SVG is based on XML language, you can use one SVG image on all devices (both low and high resolution) and zoom in infinitely without losing quality. SVG is an interactive format, it is very useful in web. As other XML languages, SVG supports CSS which allows you to add style to the elements of the image. SVG images can be static or animated.

Browser Support

can i use svg

All modern browsers support SVG (but there are some differences in IE and Edge).

History

SVG has been developing since 1999. In 2001, version 1.0 appeared, in 2011, version 1.1 was released and is currently the newest. Nowadays version 2.0 is in a phase of active development.

“+” of Using SVG

  1. SVG is simple to modify (in HTML or CSS). It is easy to change the shape, size proportion, dimension, color, fill, etc., than in raster graphic (when you work with raster graphic you must have a source file with layers where you can make all changes and only then export to your desired format).
  2. Small size. SVG objects usually take less space than other graphic formats.
  3. Scalability without changing the quality. It is very useful for retina and high resolution screens.
  4. SVG can be additionally compressed because it uses the XML language to declare objects.

“-” of Using SVG

  1. OLD browsers don’t support SVG.
  2. SVG cannot be used in raster images (but the raster image can be used inside SVG).
  3. The more details the SVG image has, the bigger the size of the file. For example, the image of grass in SVG can take 10 000 kb and the same image converted to PNG can take 200 kb. In that case, it would be more useful to export PNG from SVG in a higher resolution (2x or 4x).
  4. In a WEB browser it’s unable to render objects until it is loaded.

How can SVG be used in an HTML page?

IMAGE TAG.

You can save an SVG as a normal graphic file from your editor. Then you can simply use it in your HTML with an “IMG” tag. Also you can specify the size of the image by using the width and height attributes.

<img class="img-style" src="path/to/svg.svg" alt=”image description” width=”10px” height=”10px”>

Or set attributes in CSS:

.img-style{ width:10px; height:10px;}

Setting inline attributes is very important to avoid bugs in IE.

BACKGROUND IMAGE

Similar to the IMG tag, we can use an SVG as a background image (it is important to set background size property as element size ).

ICON FONT

By using SVG we can create an icon font, moreover, there are a lot of freely distributed icon fonts (icomoon.io, fontawesome.io, flaticon.com, fontello.com). Although, there is a serious disadvantage of using an icon font, like other symbols, the SVG icons can not have more than one color.

SVG INLINE

When you save an SVG from the editor you can get the code of SVG or open saved images in the text editor and take code from there, paste this code in your HTML page and it will be shown as an HTML object. The advantages of using this method: easy to change all SVG properties in CSS and JS, you can work with SVG like with any other DOM element, the image will load without additional HTTP requests, it is very useful for speed optimisation.
A disadvantage of this method: your HTML document becomes less readable.

SVG as OBJECT

SVG allows you to structure your document by using special elements, which will define the group of objects and be referred to in future. It is easy to duplicate the code, to keep it clean and readable.
Example: Declare SVG in HTML and hide it in any way.

<svg class="hidden">
  <g id="id1"><path d="your path"/></g>
  <g id="id2"><path d="your path"/></g>
  <g id="id3"><path d="your path"/></g>
</svg>

It can be used in any place on the document:

<svg><use xlink:href="#id1"></use></svg>
<svg><use xlink:href="#id2"></use></svg>
<svg><use xlink:href="#id3"></use></svg>

SVG by data URL

We can use an image as a background through the data URL

.background-image {
  background: url('data:image/svg+xml;utf8,<svg ...> your svg code</svg>');
}

It is very useful to describe shapes of simple SVG graphic elements like rect, circle, ellipse, line, polyline, and polygon. They work fine in all browsers, but IE doesn’t understand some chars in the UTF format. The SCSS mixin will fix that bug and keep our code clean and readable. Provide the string of the SVG image into the function. As a result we will have a string in the base64 format. Link on mixin – CodePen . (In the SCSS function we can choose elements which must be changed, that option can help us save a few bytes of image size)

Advantages:

  • Good browser support
  • Flexibility in use
  • Lack of large SVG code in HTML (in SCSS we can provide separate files for separate images)

Disadvantages:

  • Hover region is different from the image.
  • Unable to add transitions to a changing image.

Basic SVG Elements

Circle – as you can understand the element draws a circle inside SVG.

<circle cx="44" cy="55" r="22"/>

It has 3 attributes:

  • r – radius of the circle
  • cx – x position of the center of the circle
  • cy – y position of the center of the circle

Ellipse – is updated circle elements, where you can change Rx and Ry separately.

<ellipse cx="24" cy="54" rx="44" ry="15"/>

It has 4 attributes:

  • Rx – x radius of the ellipse.
  • Ry – y radius of the ellipse.
  • cx – x position of the center of the circle.
  • cy – y position of the center of the circle.

Line. It takes two points as attributes which specify the beginning and end of the line.

<line x1="0" x2="0" y1="100" y2="100"/>

It has 4 attributes:

  • X1, Y1 – coordinates of point 1
  • X2, Y2 – coordinates of point 2

Polyline. It contains multi-connected lines. All coordinates are transmitted into attribute points.

<polyline points="43 42, 43 150, 75 135, 74 132, 81 125, 86 170, 98 139, 99 152, 101 143"/>

It has only 1 attribute:

  • Points – list of coordinates (XY) separated by commas.

Polygon. It declares elements with shapes drawn with 3 or more points. So the path automatically returns to the first point at the end.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

It has only 1 attribute:

  • Points – list of coordinates (XY) separated by commas.

Path. It is the most popular shape that can be used in SVG. With its help you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, polygons, and other types of shapes, bezier curves, quadratic curves, and many more.

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

It has only 1 attribute:

  • d – A list of coordinates and how raw the path is.

How to save an image through the editor?

There are a lot of SVG editors. Let’s look at how to prepare our SVG image in Adobe Illustrator.
When your image is done go to File > Save as, choose SVG format.

SVG in WEB

  • First of all, every time you save SVG choose version 1.1 of the profile (recommended by W3C ).
  • Fonts. We have two options: Type and Subsetting. Type by default is selected “Adobe CEF” but we must select “SVG” (recommended by W3C , but for FF and IE support we must use Google fonts or Typekit by Adobe).
  • Images. This is how we attach raster images to SVG. Attach it directly inside SVG or link to an external file. When we use an external file, we increase the size of SVG files, and when we use the direct type we do not have extra HTML requests.
  • Advanced option is Decimal Places. This setting responds to the accuracy of the exportable vector. It simplifies coordinates to N decimal places. Often we do not need such high accuracy. As a result we can decrease the size of the file greatly.

SVG Optimisation

Developers or designers do not have to know all technical nuances but must follow the next rules:

  • Try to avoid a big quantity of points. The fewer the points, the easier it is to edit the image.
  • You should use a pixel grid and make your image as symmetric as possible.
  • Optimisation with the wrap tool and simplify tool allows you to decrease the quantity of vector peaks.

Summary

In this article only a few key points of the SVG format were revealed. But even now we can see that SVG is just starting its way as a format in the WEB. The Internet really needs such a vector format for rational reproduction of complex graphics in a scale-independent way. Adding code, animation, links, and everything else to SVG makes it extremely useful. Fortunately, today most Internet browsers support SVG quite well, so there are no real obstacles to the development of graphics and simple Internet applications based on SVG.

up

Please turn your device