Svg features. SVG graphic format and where it is used. What's next
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.
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 want to have one foot in the future and 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 with an 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 a font symbol: change the size using font-size, change the color using color, animate using CSS animation or JS and other.
+
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 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,” so if you have this specific audience among your site’s users, 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 size, 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
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 the 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.
SVG (Scalable Vector Graphics) is a vector graphics standard developed by the W3C consortium.
SVG is a markup language for describing two-dimensional graphics applications and images, and is a subset of the Extensible Markup Language XML. This also includes a number of related graphical scripts.
SVG is supported by all modern browsers for PCs and mobile phones.
Some features, such as SMIL animations and SVG Fonts, are not as widespread.
SVG 2 is under development. It will add new, easy-to-use features for SVG, and is also working on tighter integration with HTML, CSS and DOM.
Advantages of SVG
- SVG graphics are created using mathematical formulas that can be adjusted when the image size is changed.
- Thus, vector images scale better than raster images.
- The size of a vector image is usually smaller than comparable images in JPEG, GIF or PNG formats.
- SVG graphics have a text format that can be edited in a notepad or drawn in the vector graphic editors Adobe Illustrator and CorelDRAW.
- SVG scripts and animations allow you to create dynamic and interactive graphics.
- The text in SVG graphics is text, not an image, so it is indexed by search engines.
- You can add multiple links to an SVG image. You can connect external CSS style sheets to the SVG format, global styles inside the container
or add internal styles using the style attribute on shape and path tags.
Inserting SVG into a Web Page There are several ways to insert an SVG image into a Web page. The first of them is a simple insertion of SVG code into the page (with a large image, the HTML code of the page will become huge and difficult to read). With other methods, you first need to save the SVG code in a file with the extension.
.svg
- So, here are the ways to insert an SVG image into a Web page: ;
- directly inserting code into an HTML document in a container
- using an SVG file as a background image; connecting an SVG file to an HTML document using tags, img, embed And object;
- iframe connecting an SVG file to a PHP document using the function.
include
1. Directly inserting SVG code into a Web document
2. Using an SVG file as a background image
