SVG

Egor PolyakovApril 17, 2020 Technologies:
SVGHTMLCSSJSSMIL

Wiki for SVG graphics

Vector Scalable Graphics

Design of SVG graphics

Animation for SVG graphics

Legal use of SVG graphics

Definition

Scalable vector graphics

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.

The format SVG for retina quality of user interface
The format SVG for retina quality of user interface

Advantages of the format SVG

Disadvantages of the format SVG

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.

Standard specifications

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)

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.

Bundle Space for You

Team of Bundle Space very glad to help you in way of design using responsive and scalable graphics.

Commercial usage of SVG Generator for designers

License & use for commercial maps

You are interested in use geo pointers for commercial digital product as map of region, country or interested place?

Maybe, for sales on web or retail. You should have an license agreement for use POI like legal graphics in UI of the digital product.

Choose license & period

Commercial usage of SVG Generator for designer on marketplace

Subscribe for a new design lessons

If you interested in active learn, design and works using responsive and scalable graphics, you can subscribe for mail sending of our lessons.

You can start to use the Inmotus SVG Generator for optimization of working process. Start at demo version is free.

Subscribe for lessons

Share link:
Subscribe
Hello! We can help you.Please, choose from list.
Open FAQ for reading Ask question View tutorial video Preview the Flat UI Set
Ask your questionAnswer will be in the next 24 hours.
Main questionsPlease, choose from list.
Ask question
Hello! We can help you.Please, choose from list.
Open FAQ for reading Ask question View tutorial video Preview the Flat UI Set
Ask your questionAnswer will be in the next 24 hours.
Main questionsPlease, choose from list.
Ask question
Tutorial videofor Inmotus SVG Generator
Ask question