Using SVG-format in web-design

06/02/2018

Iryna Kunytska (UX/UI designer)

#UX/UI

Using SVG-format in web-design

Scalable Vector Graphics or shortly SVG is widely spread and its main advantage is to save qualities during scaling.

Advantages of SVG-format and where to use it

Apart from, SVG-format is very convenient for using during development under retina.
But it is not the one plus for SVG. Between advantages you can also highlight:
- Not big size, comparative to others. SVG pictures are smaller in size than raster image and it definitely positively influence on speed of downloading the site.
- An opportunity to access to separate elements through DOM, It allows to edit some separate parts of the picture or the whole image with the help of CSS. Also it gives an opportunity to link on them some events with the help of Java Script and animate.
- The text in SVG-format remains text and accordingly index by searching systems.
- It is possible to reuse the image and its parts.
- Good support by browsers tags <svg> </ svg> (look at the picture)

Ways of integration in HTML layout

Depending on for what you need image in SVG-format, you can use different ways of pasting SVG-image in HTML.

The first and the easiest way is to use the image as background (css-characteristic, background-image). But in this case, apart from background image in high quality, you won’t get anything more.

The second way is to paste images with the help of tag <img>. Analogically to background image we receive just inly the high-quality image. If we want to have an access to parts of the image, edit it or animate it, you should use the direct pasting of the SVG code using the <svg> </ svg>tag.

The work with the text in SVG-format

As was mentioned above, one of the advantages in SVG-format is its indexation.

Although one more plus is an opportunity of individual stylization that is impossible to get only with the help of CSS.

For example, let’s look on changing the text orientation. Vertical text is probably the most elementary thing to do. The more interesting it will be to put text on ascending (it can be realized with the help of <textpath> </ textpath> ):

текст-по-кривой.png <svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" > <defs> <path id="textline" fill="none" stroke="none" d="M80,100 Q126,56 97,155 T356,46 "/> </defs> <use xlink:href="#textline"/> <text y="100" x="10"> <textPath xlink:href="#textline" font-size="30"> Этот текст наложен на кривую </textPath> </text> </svg>
Make a stroke of the text or gradient fill

The example of using SVG-format in WBE logotype

When creating the blog and the site of WBE, it was decided to make the company logo with the text in SVG format for indexing and for speeding up page loading.

For a variant of the logo on the blog page, it was necessary to fill the parts of the letters with different colors. Using SVG is an excellent solution to this problem:

To achieve this effect, we used a kind of mask of polygons of different colors that we put on the text.

With the help of the <clipPath> </ clipPath> tag, we pointed out which word to apply the fill. Next, they built the polygons that were required, and using the clip-path property, specify which words to apply the fill.

Actually, here it is the code:

Analogical technology was used to logotype on the site WBE, but there were used gradients for filling up: