What is SVG: pros and cons of using it. What is SVG? Basics Vector graphics in html
Let's leave aside the question of the advisability of using SVG on a website. Everyone must determine for themselves the usefulness of this technology. Moreover, this topic has been raised several times already.
Now we will look at SVG embedding methods, their pros and cons, as well as the possibilities for manipulating SVG elements.
The article is intended primarily for those who still do not use vector graphics on their sites, but really wants to have one foot in the future present.
For those curious, I’ll immediately give you a summary table:
1 You can change the color, size, alignment, and other styles of plain text
2 Styles must be written either in the SVG file itself, or connected external style in SVG at the beginning of the file:
In truth, styles written inside SVG will also work when using an IMG or background-image tag, but this makes no sense.
Yes, you can create an icon font from SVG, and there are freely available icon fonts. But there are a number of serious limitations. Like any SVG font symbol, icons in a font cannot have more than one color.
Here are several services where you can download ready-made icon sets, or upload your own and create your own icon font:
Please note that when creating your own font, you need to convert all objects into paths. Tags and attributes that will be skipped: circle, rect, stroke, stroke-width, fill, fill-rule.
When using an icon font, all elements of an SVG object are combined into one symbol, and you can interact with it via CSS and JS only as with a font symbol: change the size using font-size, change the color using color, animate with CSS help animation or JS and so on.
+
the icon behaves like a font symbol, and all parameters are configured in the same way via CSS (size, color, alignment, etc.);
+
the only way that works in IE 8 without additional manipulations;
–
all elements of an SVG file are combined into one symbol, so it can only be manipulated using CSS or JS as a single unit;
–
Only single-color icons are supported;
–
if the font download fails, the user will either not see the icons at all, or, if the icon codes match the Unicode characters, the corresponding symbols will be displayed.
SVG as OBJECT
Unfortunately (or fortunately) codepen and jsfiddle block the loading of external objects for security reasons.
The embed looks like this:
The object embeds a data attribute element like an iframe, adding the markup of the included file inside it, so the elements can be accessed using JS, but not in a very usual way:
Var object = document.getElementById("'object'"); //get the element object var svgDocument = object.contentDocument; //get the svg element inside object var svgElement = svgDocument.getElementById("some_id_in_svg"); //get any element inside the svg svgElement.setAttribute("fill", "black"); //change the attributes of the selected element
It is worth noting that in CSS the styles for SVG elements differ from the standard ones; the full list of styles supported by SVG can be viewed.
SVG does not behave like a regular image; it cannot be disproportionately transformed by setting the width and height. The object inside will occupy the maximum area and be centered in the container:
But the object can be transformed using CSS like this:
Transform: scale(2, 1);
IE 8 and below do not support SVG from the word “at all”, therefore, if among the users of your site there is this specific audience, you should take care of checking and replacing the svg with a raster image. There are many ways to do this, for example using Modernizr to add a .no-svg class for body:
If (!Modernizr.svg) ( $(body).addClass(“no-svg”); )
.no-svg .icon ( width: 100px; height: 100px; background-image: url(“icon.png”); )
Pros and cons of this approach:
+
you can use an external CSS file to manage styles;
+
+
Interactive animations are supported;
–
Both embedding methods are somewhat similar to embedding using the object tag, for example you cannot change the proportions by changing the width and height of the container, but they have more restrictions.
External styles included in SVG will not work, and accessing elements via JS will also not work. Interactive animations in SVG won't work either. But problems with IE 8 and below still remain.
But SVG animations will work in both cases.
In the case of IMG, embedding looks like a regular picture:
In the case of background-image as a regular block:
.icon ( background-image: url("icon.svg"); width: 90px; height: 150px; )
Also, using background-image, you can use sprites, as with png images, and you can change the size using background-size:
Background-size: 90px 150px;
Considering that the percentage of people with device-pixel-ratio screens higher than 1 and their devices do not support svg tends to zero (if there are any), then you can use media expressions to connect svg, only for them, and for the rest use the png version:
Icon ( background-image: url("icon.png"); ) @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio : 1.5), only screen and (-o-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) ( .icon ( background-image: url("icon.svg "); ) )
Pros and cons of these approaches:
+
SVG animations and filters are supported;
+
in the case of background-image, you can use SVG sprites;
–
You cannot change the properties of SVG elements via CSS or JS;
–
Interactive animations are not supported;
–
For IE 8 and below, it needs to be replaced with a bitmap.
In this version, the SVG code, which can be obtained by opening any SVG file with a text document, is embedded directly into the page code.
Undoubtedly, this design impairs the readability of the code and increases its volume, but it opens up new possibilities.
For example, having a set of icons in an SVG file, you can reuse them with a simple design like:
Where some_svg_element_id id of the element inside the original SVG file.
For example, you can apply SVG transformations to a single element:
But if an interactive animation was applied to an element inside the original SVG, for example on a click, as in the demo above, then when duplicating an object, the animation will work on all elements at the same time.
SVG animations and filters are a topic for a separate article, so I’ll limit myself to
SVG files are scalable vector graphics files. To be more precise, it is a language for describing two-dimensional graphics. The basis was the XML markup language.
This format has a number of advantages: being vector images, SVG images maintain quality no matter how they are scaled or resized. SVG images support interactivity and animation. SVG is a W3C standard, which means it has good and high-quality support. You can create SVG files not only in graphic editors, but also in any text editor.
XML-based SVG images are searchable, indexable, and can be scripted and compressed.
Before moving on to drawing without drawing, let's look at the structure of an empty svg file, sufficient for display in any program.
1.
2.
3.
4.
5.
For convenience, the lines are numbered. The first line contains the standard declaration of the XML document.
The second line is an indication of the DTD schema of the document. The third line sets the size of the created document to 600 by 600 pixels. First tag attribute
Circle.
To create a circle, add the line to our empty svg file
The attributes are the coordinates of the circle's center (cx and cy) and its radius (r). In this case, the origin of coordinates lies in the upper left corner of the worksheet. Full svg file:
A circle will be created exactly in the center of the document, with a radius of 100 pixels. Since there were no instructions about the fill color, stroke, layers or other effects, the circle is drawn without a stroke and filled with black, which is what we see when opening the document in Inkscape. Please note that there will be no layers in the document.
Attribute designations cx, cy And r is standard. Let's set the stroke and fill of our circle, and also set the stroke thickness to 6 pixels.
fill= "green" stroke= "yellow" stroke-width= "6"/>
The fill is set to green and the stroke is set to yellow.
What’s interesting is that if you create a layer in this document, you can see that the circle drawing will not be on the created layer, but somewhere there? The corresponding attributes are highlighted in red. If you need to create a circle without fill or stroke, set the value of the corresponding attribute to none
stroke= "none"
To change the transparency of the fill, add an attribute opacity, For example opacity= "0.5" reduces the transparency of the fill by 2 times, and to change the transparency of the stroke, add the attribute stroke-opacity, For example stroke-opacity= "0.5" Reduces the transparency of the stroke by 2 times.
Rectangles, squares.
Setting rectangles looks like this
Attributes of a rectangle (square) rect indicate the coordinates of the upper left corner, as well as the width and height of the rectangle. The fill and stroke settings look the same.
Well, in the end, a circle with a square
To change transparency, we use an already known approach - add an attribute opacity for fill and attribute stroke-opacity for outlining.
To be continued.
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 in a 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.
- Raster.
- Vector.
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. This is it 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 algorithm embedded in the computer program - a 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's logical to assume that SVG graphics can be integrated directly into the HTML code of a web page, formatted using CSS style sheets, and even included Javascript programming 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 of a 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 review of the product from all sides and even from the inside.
Or on a medical website, using such a graphical 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 with 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 unnecessary 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.
This post is the first in a series of articles on SVG (Scalable Vector Graphic) graphics, covering the basics of vector graphics on the site.
Vector graphics are widely used in printing. For websites there is SVG, which according to the official specification on w3.org is a language for describing two-dimensional graphics in XML. SVG includes three types of objects: shapes, images, and text. SVG has been around since 1999, and has been included in recommendations since August 16, 2011 W3C. SVG is highly underrated by web developers, although it has several important advantages.
Advantages of SVG
- Scaling: Unlike raster graphics, SVG does not lose quality when scaled, so it is convenient to use for retina development.
- Reducing HTTP requests: when using SVG, the number of calls to the server is reduced, and the site loading speed increases accordingly.
- Styling and scripting: Using CSS, you can change graphics settings on the site, such as background, transparency, or borders.
- Animation and editing: using javascript you can animate SVG, as well as edit it in a text or graphics editor (InkScape or Adobe Illustrator).
- Small size: SVG objects weigh much less than raster images.
Basic SVG Shapes
According to the official specification, you can draw simple objects using SVG: rectangle, circle, line, ellipse, polyline or polygon using a tag svg.
Simple line using tag line with only two parameters - start points (x1 and x2) and end points (y1 and y2):
You can also add stroke and stroke-width attributes or styles to set the color and width:
Style="stroke-width:1; stroke:rgb(0,0,0);"
broken line
The syntax is similar to the previous one, the tag is used polyline, attribute points sets points:
Rectangle
Called by the rect tag, you can add some attributes:
Circle
Called by tag circle, in the example using the attribute r set the radius, cx And cy specify the coordinates of the center:
Ellipse
Called by tag ellipse, works similarly circle, but you can specify two radii - rx And ry:
Polygon
Called by tag polygon, a polygon can have a different number of sides:
Using editors
As you can see from the examples, drawing basic SVG shapes is very simple, but objects can be much more complex. For these, you need to use vector graphics editors, such as Adobe Illustrator or Inkscape, where you can save files in SVG format and then edit them in a text editor. You can insert SVG into a page using embed, iframe and object:
An example is an image of an iPod from OpenClipArt.org:
Browser support
SVG is supported by almost all modern browsers except Internet Explorer 8 and below. But this can also be fixed using the javascript library Raphael.js. You can convert an SVG file to this library format at ReadySetRaphael.com.
First you need to connect the Raphael.js library to the desired page, then download the SVG file, copy and paste the generated code into function:
Window.onload=function() ( //insert Raphael code here)
Insert on page div with attribute rsr.
Vector graphics are widely used in printing. But we can also use it for websites using SVG ( Scalable Vector Graphic - scalable vector graphics). According to the W3.org specification, SVG is defined as:
A language for describing two-dimensional graphics in XML. SVG allows three types of objects: vector graphics (such as paths made up of straight lines and curves), images, and text.
Despite the fact that SVG has been included in the W3C recommendations since August 2011, this technology is practically not used in web projects, although it has a number of advantages over raster images. In this series of lessons we will introduce how to work with SVG elements on web pages.
Advantages of SVG
Resolution independence
Raster images are resolution dependent. Graphics take on an unpresentable appearance when resizing to a certain scale. With vector graphics, this situation is impossible in principle, since everything is represented by mathematical expressions that are automatically recalculated when the scale is changed, and the quality is maintained in any conditions.
Reducing the number of HTTP requests
SVG can be embedded directly in an HTML document using the svg tag, so the browser doesn't need to make any requests to serve the graphics. This approach has a good effect on the loading characteristics of the website.
Styles and scripts
Embedding with the svg tag also makes it easy to style your graphics using CSS. You can change object properties such as background color, transparency, borders, and so on. Graphics can be manipulated in a similar way using JavaScript.
Easy to edit and animate
SVG objects can be animated using CSS or JavaScript. SVG objects can also be modified using a text editor.
Smaller file size
SVG has a smaller file size compared to raster graphics.
Basic SVG Shapes
According to the specification, we can draw several basic shapes: line, polyline, rectangle, circle, ellipse. All elements must be inserted into the tag . Let's look at the basic elements in detail.
Line
To display a line in SVG, use the element
The start of the segment is determined by the attributes x1 and y1 , and the end point is determined by the coordinates in the attributes x2 and y2 .
There are also two other attributes (stroke and stroke-width) that are used to define the color and width of the line, respectively.
This object is similar to
Element
The rectangle is drawn using the element
To display a circle we use the element
The first two attributes cx and cy define the coordinates of the center. In the above example, we set the value to 102 for both coordinates. The default value is 0.
To display an ellipse we use the element
Element
Using a vector graphics editor
Outputting simple SVG objects to HTML is easy. However, as the complexity of the object increases, this practice can lead to a large amount of work required.
But you can use any vector graphics editor (for example, Adobe Illustrator or Inkscape) to create objects. If you have a tool like this, drawing the necessary objects in them is much easier than encoding graphics in an HTML tag.
You can copy vector graphics commands from a file into an HTML document. Or you can embed the .svg file using one of the following elements: embed , iframe and object .
The result will be the same.
Browser support
SVG has good support in most modern browsers, with the exception of IE version 8 and earlier. But the problem can be solved using the JavaScript library. To make your work easier, you can use the ReadySetRaphael.com tool to convert SVG code to Raphael format.
First, we download and include the library in the HTML document. Then we load the .svg file, copy and paste the resulting code into the function after loading:
In the body tag we place the following div element with the identifier rsr .
And everything is ready.
In the next tutorial in the series, we'll look at how to style SVG objects in CSS.
