Definition
The format SVG (from english Scalable Vector Graphics) is a markup language of scalable vector graphics, created by World Wide Web Consortium (W3C) and included in a subset of the extensible XML markup language. SVG used to describe two-dimensional (2D) vector and mixed vector or raster graphics in XML format.
The format SVG supported the static and dynamic interactive graphics.
SVG is the opened format, recommended by Consortium W3C (also developed the HTML and XHTML). The format SVG created on basis of VML and PGML. Available to use on PC, Mac, Linux and Android platforms.
Advantages of the format SVG
- The SVG is a text format. SVG files can be read and edited in code with any skills in coding using regular text editors. When viewing documents containing SVG graphics, you have access to view the code of the file being viewed and the ability to save the entire document. In addition, SVG files are usually smaller in size than comparable quality images in JPEG or GIF, and are also very compressible.
- Scalability - SVG is a vector format. It is possible to enlarge any part of the SVG image without loss of quality. In addition, it is possible to apply filters to elements of an SVG document — special modifiers for creating effects similar to those used in processing raster images (blur, extrusion, complex transformation systems, etc.) In the text of the SVG code, filters are described by tags, the visualization of which is provided by the viewer, which does not affect the size of the source file, while providing the necessary illustrative expressiveness.
- The use of raster graphics in SVG documents is widely available. It is possible to insert elements with images in PNG, GIF or JPG formats.
- The text in the SVG graphic is text, not an image, so it can be selected and copied, it is indexed by search engines, you do not need to create additional metafiles for search engines.
- Animation is implemented in SVG using the SMIL (Synchronized Multimedia Integration Language), also developed by the W3C consortium. Scripting languages are supported based on the ECMAScript specification. SVG elements can be controlled using JavaScript. Using scripts and animations in SVG allows you to create dynamic and interactive graphics. In SVG, an event model is provided, events are tracked (page loading, changes in its parameters, mouse, keyboard, etc.) Animations can be triggered by a specific event (for example, “onmouseover” or “onclick”), which gives interactivity to the graphics. Each element has its own events, to which individual scripts can be attached.
- SVG is an open standard. Unlike some other formats, SVG is not owned by anyone. But created scalable vector graphics has owners: designers or companies, who has commercial licensies to sales the graphics.
- SVG documents are easily integrated with HTML and XHTML documents. External SVGs are connected via the <objectᐳ tag, the value of the data attribute is the name of the file with the extension “.svg” containing the SVG markup, type is the MIME type, that is, image / svg + xml. The width and height attributes specify the horizontal and vertical sizes of the SVG area. SVG elements are compatible with HTML and DHTML.
- Compatibility with CSS (English Cascading Style Sheets). The display (formatting and decoration) of SVG elements can be controlled using the CSS 2.0 stylesheet and its extensions, or directly using SVG element attributes.
- SVG provides all the benefits of XML:
- Ability to work in various environments.
- Unicode support.
- Wide availability for various applications.
- Easy modification through standard APIs - for example, DOM. SVG supports the standardized W3C object model of the DOM document, providing access to any element, which gives ample opportunities for the dynamic change of elements, their attributes and events.
- Easy conversion with XSLT style sheets. Like any XML-based format, SVG makes it possible to use transformation tables (XSLT) to process it. By converting XML data to SVG using simple XSL, you can easily get a graphical representation of any data, for example, visualize chemical molecules described in CML (Chemical Markup Language).
Disadvantages of the format SVG
- SVG inherits all the shortcomings of XML, such as the large file size (however, the latter is offset by the existence of a compressed SVGZ format).
- The complexity of use in large mapping applications due to the fact that for the correct display of a small part of the image, the document must be read in its entirety.
Structure of the document in the format SVG
The first line is the standard XML header, declaration (English XML declaration) indicating the version of XML (version) (usually “1.0”) and character encoding (encoding) (preferably using Unicode encodings UTF-8 or UTF-16, but other encodings also valid, for example, Russian Windows-1251 and KOI-8):
<? xml version = "1.0" encoding = "UTF-8"?ᐳ
The second and third lines should contain the DOCTYPE header, which defines the document type (English Document Type Definitions) DTD:
<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"ᐳ
Unfortunately, in some cases, when using Mozilla Firefox with a built-in SVG viewer, the contents of the DOCTYPE declaration may be a source of errors. There are recommendations not to use the DOCTYPE declaration in SVG versions 1.0 and 1.1. Instead, it is recommended that the baseProfile attribute be included in the root <svgᐳ element with a value of "full" [1].
If for some reason the DOCTYPE declaration in the document is necessary, it is recommended to use an empty declaration, as in the example.
<! DOCTYPE svg [
<! - your data ->]ᐳ
The fourth line contains the root element of the document with the SVG namespace.
<svg version = "1.1"baseProfile = "full"
xmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink"
xmlns: ev = "http://www.w3.org/2001/xml-events"
width = "100%" height = "100%"ᐳ
Next is the rest of the text of the document embedded in the root element, where the elements that describe the content of the encoded scene are actually located.
The document always ends with the closing of the root tag </svgᐳ.
Supported format SVGZ
Since the SVG code takes up a lot of space, an “wrapper” of SVGZ was created when the SVG is compressed using gzip and the extension “SVGZ” is assigned to the resulting file.
SVG shrinks well because it is an XML text document with a regular structure.
Commercial licenses for SVG graphics
Legal usage of SVG graphics based on the license agreement. There are free, limited and extended rights for commercial use of SVG graphics.
- Free license or open license is actual for all purposes to use the vector scalable graphics.
- Standard commercial license to limited use of the vector scalable graphics.
- Extended commercial license to non-limited use of the vector scalable graphics.
Standard specifications
- SVG 1.2 (preliminary)
- SVG 1.1
- SVG Mobile 1.2 (preliminary)
- SVG Mobile
- SVG Printing
- SVG Requirements (preliminary)
Support in browsers
The format SVG is supported in main browsers on WebKit engine.
✔ Internet Explorer from ver. 8.0.
✔ Mozilla Firefox from ver. 1.5.
✔ Netscape Navigator from ver. 9.0.
✔ Google Chrome from ver. 3.0.
✔ Safari from ver. 4.0.
✔ Opera from ver. 8.0.
Viewers for graphics in the format SVG
The format SVG available to view, use and edit on PC, Mac, Linux and Android platforms.
View of SVG on PC (Windows)
- Adobe Flash Player
- Adobe Flash Professional
- CorelDRAW
- Inkscape
- Inmotus SVG Generator
- Adobe Illustrator
- Adobe InDesign
- Microsoft Visio
- Corel PaintShop Pro
- Serif DrawPlus
- CADSoftTools ABViewer
View of SVG on Mac (iOS)
View of SVG on Linux
View of SVG on web
Instructions for design the SVG graphics
The standard step by step instructions for design of different printing and digital objects using the SVG graphics.