# Scalable vector graphics

Scalable vector graphics
File extension : .svg, .svgz
MIME type : image / svg + xml
Developed by: World Wide Web Consortium
Type: vector image format
Extended by: XML
Website : SVG 1.1
SVG 1.2 Tiny (Mobile)
SVG 2

Scalable Vector Graphics (short and SVG , English for scalable vector graphics ) is that of the World Wide Web Consortium recommended (W3C) specification two-dimensional to describe vector graphics . SVG, which is based on XML , was first released in September 2001. Practically all relevant web browsers can display a large part of the language range.

The main advantage of the SVG format over other graphic formats such as JPG , PNG or TIFF is - especially in responsive web design - the scalability without loss of quality.

Animations are supported by SVG using SMIL . The SVG- DOM can be manipulated with the help of embedded functions via script languages .

Since SVG is an XML-based file format, the content of SVG files is easily accessible for computer-aided translation and other processing. They can be created directly with a text editor or are the output of programs with a different input, see for example Gnuplot . SVG editors allow convenient editing in the graphic view.

The recommended file extension is .svg or, if the file is compressed with gzip , .svgz . The MIME type is image/svg+xml.

## history

In 1998 two languages ​​were submitted to the World Wide Web Consortium (W3C) for standardization:

The W3C, however, did not take either of the two languages ​​as a recommendation, but combined them and developed them further under its own direction. Detailed reasons for developing a new language can be found in, among other things, a detailed list of requirements in the first working draft.

On September 4, 2001, the W3C published under the name of Scalable Vector Graphics (SVG) 1.0 Specification , the first recommendation (English recommendation ). This recommendation was accepted as the standard by parts of the IT industry. Microsoft did not follow this for a long time and only supported the vector language VML in its applications . The first version of Internet Explorer to natively support SVG is version 9. As of Internet Explorer 10, Microsoft no longer supports VML.

On August 3, 2001, a first working draft for a modularization of SVG was published in order to make suitable parts of SVG accessible as a recommendation for mobile devices with a lower scope of performance.

This ultimately led to version 1.1 with three profiles, 'Tiny' for devices with a lower performance, 'Basic' for devices with a slightly higher performance range and 'Full', which includes the full functionality of SVG 1.0. Apart from the corrections of known errors, SVG Full 1.1 is the same as SVG 1.0 in terms of functions and features.

On January 14, 2003, the recommendations for SVG 1.1 and SVG Mobile were published.

These recommendations were then revised. The last modification of the mobile variant is from 2009. For SVG 1.1 there is a second modification from August 16, 2011.

Initially, it was planned to expand SVG 1.1 with version 1.2. However, this was primarily received with interest by providers of mobile devices, while providers of display programs for computers initially concentrated on the implementation of SVG 1.1. As a result, the profile for SVG Full 1.2 did not get beyond a working draft.

However, work continued on the mobile version of SVG 1.2. In the meantime, there was also a significant increase in the scope of services for mobile devices, which is why the company has limited itself to a profile for the mobile market. On December 22, 2008, a recommendation for a tiny profile was published for this version. Compared to 1.1, this introduces some new features and functions, such as elements for audio, video and the embedding of other SVG documents taken over from SMIL , the declarative removal of elements from the document-object model, and new extensions for accessing scripts the document-object model, limited transformations, painting services for color, the possibility of specifying a background color for the painting area, automatic text wrapping, the possibility of interactive text input and modification of text. In addition, it was possible to resolve some ambiguities and inconsistencies with regard to the declarative animation in this version, which was then largely adopted as a bug correction in the second edition of SVG 1.1.

The current specifications are the SVG Tiny 1.2 version and the second version of SVG 1.1. Work on SVG 2 has been in progress since 2011 and should contain numerous changes and enhancements. A candidate recommendation has existed since September 15, 2016 . Further Candidate Recommendations were published on August 7 and October 4, 2018 . In the meantime, numerous planned innovations and requirements for version 2 have been deleted.

## document

As an XML document, an SVG is built up in a tree structure from various elements and the attributes assigned to these elements. As is usual with XML-based languages, an SVG file can begin with the XML declaration . This can be followed by processing instructions, such as those for referencing external style templates. We do not recommend specifying the optional document type declaration . It has been possible and common with SVG since the beginning to note abbreviations in the form of entities in the internal document type declaration in order to be able to reduce the file size. As of version 1.0, the recommendations contain corresponding examples.

As with all XML documents, this header is followed by the root element; for SVG documents, this is called svg . In order to clearly assign the element and its content to the SVG namespace and to give it a defined meaning that has to do with the SVG recommendations, the namespace for the root element is noted with the XML attribute construction xmlns .

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" baseProfile="full"
width="800mm" height="600mm"
viewBox="-400 -300 800 600">
<title>Titel der Datei</title>
<desc>Beschreibung/Textalternative zum Inhalt.</desc>

<!--Inhalt der Datei -->

</svg>


The size of the graphic is defined with the attributes width( English : width ) and height(English: height ) of the SVG element svg . If these attributes are not set, the size is implied, in each case according to an attribute value of 100%for widthand height, which corresponds to 100% of the height and width of the available display area. The attribute viewBoxcan be used to specify which area of ​​the drawing plane is to be displayed in the display area. If necessary, this area is transformed into the display area. If the attribute is not specified, the area coincides with the display area, so no transformation takes place. Since the author does not know the size of the display area, we viewBoxrecommend using general, especially if no information or percentages are given for widthand height.

### Coordinate system and specification

Comparison of the coordinate systems of a raster graphic and an SVG. The raster graphics only allow integer coordinates, SVG as vector graphics also allow floating point numbers as coordinates.

The initial coordinate system has its origin in the upper left corner of the drawing area. It is an internal, dimensionless coordinate system with the X-axis pointing to the right and the Y-axis pointing downwards. This coordinate system is dimensioned for the output by the attributes width(width) and height(height). Using the attribute viewBoxand, in the case of most descendants of the root element, also using the attribute, transformresults in a current coordinate system that deviates from the initial coordinate system. All relative and absolute length specifications within the graphic are related to this current coordinate system. In the full version of SVG, both relative (such as em or percent) and absolute values ​​(such as meters or inches ) can be selected as units . For this purpose, the units known from the style template language Cascading Style Sheets are available in SVG . In the tiny versions, however, only dimensionless lengths are used in the content. Units are only permitted for widthand of heightthe root element, as in the full version. This procedure is generally useful for SVG documents, also in the full version, because it avoids error-prone conversions of units.

In contrast to the integer pixel coordinates in raster graphics (e.g. JPEG , PNG , BMP ), SVG coordinates are floating point numbers . Pixel specifications in raster graphics, on the other hand, have a limited resolution, as their value range is limited to whole numbers and the dimensions of the image - according to the nature of the pixels, which are small, uniformly sized, single-colored rectangles. In the case of raster-based output media - for example a monitor - an SVG specification does (x = '100' y = '200')not designate the entire screen pixel , but its upper left corner (or one of the other corners of the corresponding neighboring pixels). A prerequisite for this example is that the scaling of the SVG document is selected appropriately.

### elements

SVG has different types of elements:

• Elements with graphical presentation made up of graphical primitives
• Text in a specific font that must be available to the rendering program.
• Grouping elements on the one hand for elements to be displayed, but also as a reserve for referencing by other elements
• Elements for providing text alternatives and meta information
• Elements for providing painting services such as colors, color gradients and patterns, including markings, masks or filters
• Elements for animation
• Elements for the inclusion of other language structures (style templates, scripts, representable fragments from other namespaces)
• Elements for embedding external documents ( vector graphics or raster graphics ), internal and external document fragments
• Elements for defining fonts and alternative representations of glyphs

#### Graphic elements

All graphic elements in SVG are based on simple basic elements, so-called graphic primitives . Complex objects can be created by combining several graphic primitives. For all graphic elements, the filling, type of outline and transparency can be defined using attributes. The graphic elements available in SVG are:

Rectangle, circle, ellipse, path and polygon as examples of graphic primitives. Path and polygon are filled.
##### path

The element <path />defines a curve consisting of any number of sub-paths, which in turn consist of a combination of lines , elliptical arcs, quadratic and cubic Bézier curves , which are described with the help of relative or absolute coordinates. The path can be closed, filled and used as a clipping path. The path is the most powerful graphic element in SVG. Practically everything that can be drawn by other graphic elements can be represented equivalently by a path element. The other graphic elements exist to ensure better usability on the one hand, but also to emphasize the meaning of the content more clearly, because the notation of a corresponding path in the source text can often not be seen at first glance whether it is a simple circle, a Ellipse, a rectangle with rounded corners. It also makes animation of these special shapes easier. Like the path element, they can be drawn as an outline, filled and used for clipping (with the exception of the <image />element). Another exception arises from the fact that the Tiny profiles do not allow elliptical arcs, so circles, ellipses and also rectangles with elliptically rounded corners cannot be <path />constructed exactly with the element in this profile , but with the special elements provided for them.

##### circle

The element <circle />defines a circle , which is described by its radius and the position of the center point.

<circle cx="125" cy="125" r="75" />

##### ellipse

The element <ellipse />defines an ellipse , which is described by its two semi-axis radii , their orientation and, analogous to the circular element , by the position of its center point.

##### rectangle

The element <rect />defines a rectangle by the position of its upper left corner, its width and its height. Optionally, the corners of the rectangle can be rounded.

<rect x="25" y="25" width="200" height="200" />

##### line

The element <line />defines a simple straight line (segment), which is described by the coordinates of its two end points.

<line x1="50" y1="50" x2="200" y2="200" />

##### Traverse

The element <polyline />defines any number of points that are connected as a polygon by lines. The points are described using coordinate pairs.

<polyline points="50,150 50,200 200,200 200,100" />

##### Polygon

The element <polygon />defines a polygon that is described by its corner points. As with the polygon, the corner points are specified as coordinate pairs and connected to one another in the order in which they were defined.

##### text

The element <text />embeds text in the graphic. The text element can be formatted using attributes such as font size and font, running direction and word spacing. Text can also be structured using sub- <tspan />elements such as .

##### image

The element ( <image />) integrates a raster graphic that is described by specifying a path, width and height as well as the position.

#### grouping

All of these elements can be combined with the group element ( <g />). Transformations and styling applied to the group item apply to all of the child items grouped with it.

The element <a />is also suitable for grouping the content to be displayed, but can also have a reference functionality.

The element <defs />is also used in a certain way for grouping, but its content is not displayed directly, but is intended as a pool from which other elements can reference.

#### Text alternatives, barrier freedom and accessibility

As with most of the formats recommended by the W3C, particular emphasis is placed on SVG to give authors easy options for making content accessible. The basis is primarily the possibility of providing a text alternative. The other way around, the graphic representation of the document could also be described as an alternative to this textual content. If a sufficient text alternative is missing, the formal conclusion that the document does not contain any relevant information can be drawn.

Every SVG document that is relevant in terms of content should therefore have at least an element as the first child element of the root element <title />. As the name suggests, the title of the work is mentioned as a text, for example in the sense of a short summary. Titles can also only serve to identify a work in an external discussion (how to designate works by artists if one wants to discuss these works).

On <title />one element can <desc />follow. The content of <desc />is a more detailed description of the work, more in terms of its meaning and function than its graphic implementation. The content of <desc />can be simple text, but it can also be structured using another XML format such as XHTML. <title />and <desc />together represent the text alternative to the graphic content of the document. This is the core content of the document with regard to the function of barrier freedom and accessibility and thus also allows people access to the information of the document who cannot or do not want to see the graphic representation. Since the meaning of graphic representations is not necessarily easy to understand, this alternative content can of course also be very useful for other people. As an alternative, this text alternative is only shown if the graphic representation is not shown. In addition, the text alternative can be displayed if the user requests it.

In <desc />further an element may <metadata />follow, which is primarily intended to include meta-information about the document. This meta information is usually recorded in a structured manner so that it can be automatically evaluated by programs. The XML format RDF or elements and terms according to Dublin Core are suitable for structuring.

Almost all other elements of SVG can also contain <title />, <desc />and <metadata />with a described function, they then form the text alternative and meta information for the element in which they are noted, including the descendants of this element.

The concept has weaknesses in terms of multilingualism, especially with regard to the element of <title />the root element, which can only be noted with one language. In the case of multilingual works, it can make sense to regard the content of this element only as a language-invariant identification of the work and to accommodate the actual multilingual text alternative in the other two elements, which can have more structure.

#### Presentation and style templates

The display of elements can be influenced with presentation attributes. For example, the filling, contour line and transparency of the elements can be specified, as well as the properties of the font for text. For the presentation attributes, there are also properties with the same name in accordance with Cascading Style Sheets (CSS), which are suitable for offering an alternative presentation with a style template. The properties and thus style templates are not provided for profiles of the tiny type. The presentation attributes and the associated properties are largely based on the style template languages XSL and CSS, which are widely used in the XML environment . Not only colors but also color gradients and patterns can be used with additional elements.

Due to the availability of presentation attributes and properties, a separation between content and decoration can be made, similar to the combination of (X) HTML and CSS. What is noted with elements and attributes is considered to be relevant in terms of content or important for understanding the document, and what is offered as an alternative presentation with style templates in another language such as CSS as decoration .

As with all XML formats, external style templates can be referenced with appropriate processing instructions. In addition, SVG also has a special element stylein which style templates can be noted. With an attribute style, a style template can also be noted for each element. However, since the attribute value of stylehas a very high priority and the style template is also poorly separated from the actual content as an attribute value, the use of the attribute is considered to be easily avoidable and bad in terms of the principle of separating content and decoration.

#### transformation

Each element and each group of elements can be changed in position, orientation and shape by a series of affine transformations . The transformation is attached to any element as an attribute. Are available translation (parallel shift) , rotation , scaling , shearing , as well as the combination of different transformations in the form of a 3 × 3 matrix . The matrix is ​​applied to points in a projective representation and thus represents the combination of a linear mapping in the form of a 2 × 2 matrix with a translation, but without having to differentiate between the last two mapping types. The transformations can be combined as required, with the successive execution of transformations corresponding to the multiplication of the transformation matrices.

A transformation with direct matrix specification takes place with

transform="matrix(a b c d e f)"

This is a short form for the non-constant elements of the mapping matrix

${\ displaystyle {\ begin {pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \\\ end {pmatrix}}}$

Here corresponds:

Translation around t x and t y
transform="translate(tx,tty)" transform="matrix(1 0 0 1 tx ty) ${\ displaystyle {\ begin {pmatrix} 1 & 0 & t_ {x} \\ 0 & 1 & t_ {y} \\ 0 & 0 & 1 \\\ end {pmatrix}}}$
Rotation with angle α around point (0,0)
transform="rotate(α)" transform="matrix(cos(α) sin(α) -sin(α) cos(α) 0 0)" ${\ displaystyle {\ begin {pmatrix} cos (\ alpha) & - sin (\ alpha) & 0 \\ sin (\ alpha) & cos (\ alpha) & 0 \\ 0 & 0 & 1 \\\ end {pmatrix}}}$
Rotation with angle α around point (c x c y ) (see below)
transform="rotate(α,cx,cy) transform="matrix(cos(α),sin(α),-sin(α),cos(α),cx,cy) matrix(1,0,0,1,-cx,-cy)"
= transform="matrix(cos(α),sin(α),-sin(α),+cos(α),(1-cos(α))cx + sin(α)cy, (1-cos(α))cy - sin(α)cx)"
${\ displaystyle {\ begin {pmatrix} cos (\ alpha) & - sin (\ alpha) & (1-cos (\ alpha)) \, c_ {x} + sin (\ alpha) \, c_ {y} \ \ sin (\ alpha) & + cos (\ alpha) & (1-cos (\ alpha)) \, c_ {y} -sin (\ alpha) \, c_ {x} \\ 0 & 0 & 1 \\\ end {pmatrix }}}$
Scaling by the factors s x and s y
transform="scale(sx,sy) transform="matrix(sx 0 0 sy 0 0) ${\ displaystyle {\ begin {pmatrix} s_ {x} & 0 & 0 \\ 0 & s_ {y} & 0 \\ 0 & 0 & 1 \\\ end {pmatrix}}}$
Shear at angle α in the X direction
transform="scewX(α)" transform="matrix(1,0,tan(α),1,0,0)" ${\ displaystyle {\ begin {pmatrix} 1 & tan (\ alpha) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \\\ end {pmatrix}}}$
Shear at angle α in the Y direction
transform="scewY(α)" transform="matrix(1,tan(α),0,1,0,0)" ${\ displaystyle {\ begin {pmatrix} 1 & 0 & 0 \\ tan (\ alpha) & 1 & 0 \\ 0 & 0 & 1 \\\ end {pmatrix}}}$

Matrix calculation:

A mapping acts on a point P - d. H. on its projective representation in homogeneous coordinates - by multiplying them from the left with the corresponding mapping matrix. If P is shifted by T , its new coordinates are

${\ displaystyle T (P) = T \ cdot P = {\ begin {pmatrix} 1 & 0 & t_ {x} \\ 0 & 1 & t_ {y} \\ 0 & 0 & 1 \\\ end {pmatrix}} \ cdot {\ begin {pmatrix} p_ { x} \\ p_ {y} \\ 1 \\\ end {pmatrix}} = {\ begin {pmatrix} p_ {x} + t_ {x} \\ p_ {y} + t_ {y} \\ 1 \ \\ end {pmatrix}}}$

analog for scaling with S :

${\ displaystyle S (P) = S \ cdot P = {\ begin {pmatrix} s_ {x} & 0 & 0 \\ 0 & s_ {y} & 0 \\ 0 & 0 & 1 \\\ end {pmatrix}} \ cdot {\ begin {pmatrix} p_ {x} \\ p_ {y} \\ 1 \\\ end {pmatrix}} = {\ begin {pmatrix} s_ {x} \ cdot p_ {x} \\ s_ {y} \ cdot p_ {y} \\ 1 \\\ end {pmatrix}}}$

In this case, T and S are executed one behind the other

${\ displaystyle T \ circ S = T \ cdot S = {\ begin {pmatrix} s_ {x} & 0 & t_ {x} \\ 0 & s_ {y} & t_ {y} \\ 0 & 0 & 1 \\\ end {pmatrix}}}$

such as

${\ displaystyle S \ circ T = S \ cdot T = {\ begin {pmatrix} s_ {x} & 0 & s_ {x} \! \ cdot \! t_ {x} \\ 0 & s_ {y} & s_ {y} \! \ cdot \! t_ {y} \\ 0 & 0 & 1 \\\ end {pmatrix}}}$

the last representation can e.g. B. be encoded as

„scale(sx sy) translate(tx ty)“


or as

„matrix(sx 0 0 sy sx·tx sy·ty)“


The concatenation of twice "matrix" in SVG means

transform="matrix(a1 b1 c1 d1 e1 f1) matrix(a2 b2 c2 d2 e2 f2)"
= transform="a1*a2+c1*b2, b1*a2+d1*b2, a1*c2+c1*d2, b1*c2+d1*d2, a1*e2+c1*f2+e1, b1*e2+d1*f2+f1"

#### animation

Illustration of an animation in SVG: Simultaneous animation of the fill color and the transformation of a rectangle over 5 seconds.

SVG has elements with which animation can be carried out interactively and declaratively, that is, without scripts, purely through information in the XML markup language. SVG takes over elements from SMIL and interprets them in its own namespace.

Example of an animated SVG document ( click here to start the animation ; does not work in all browsers)

Declarative animations can be implemented using the elements adopted from SMIL . The recommendations describe in detail which features can be animated and in what way. Most of the attributes and properties can be animated, and there is also the option of animating the position of grouping elements or displayable elements.

Times can be given from milliseconds to hours and can be marked differently. For most animation elements, a mandatory attribute is required that defines the type of animation. Further basic components are time information, states during the animation (optional), the state after the animation, and whether the animation should be repeated after completion, whether the animation effect is then cumulative and whether it is additive with regard to other animations with lower priority and the noted attribute values should be. Logical terms such as begin ( English : start, beginning ) end (English: end ) and dur (English "duration": duration ) are used to indicate the time. Start, repetitions etc. can also be made dependent on events such as mouse touch or click.

The selection of the animated attribute or the animated property is determined in SVG by two attributes: attributeNameindicates the name of the attribute to be animated or the property to be animated, attributeTypeindicates whether an attribute is animated or a (CSS) property. In the illustrated example it is indicated that the filling ( fillattribute) of a rectangle and its transformation ( transformattribute) are animated over a period of five seconds. The illustration itself does not contain any animation. At the beginning the rectangle is filled in blue and not twisted, after five seconds it is filled in green, slightly offset and rotated by 150 °. The intermediate states can be changed discretely depending on the specified attributes, change uniformly, but also unevenly, shown schematically in the example by four intermediate steps.

#### Graphic effects and filters

Blur filter in SVG. Left without, right with filter, applied to a group of elements.

Well-known graphic filters have been adopted from desktop publishing programs and work according to the matrix principle , in which operators and functions express the form of the matrix . Each individual image position is calculated with the defined filter effect and transferred to the next. In this way, images and graphics can be edited in a wide variety of ways.

#### programming

With the exception of the Tiny 1.1 profile, SVG provides access to the XML Document Object Model (DOM) and its own extension to this DOM. This makes it possible to manipulate the presentation of an SVG document. This is mostly used with scripting languages ​​such as ECMAScript / JavaScript in order to dynamically change them during the presentation in order to allow viewers an interactive alternative access to the content. However, the DOM representation can also be manipulated before viewing, after which a document with changed content can be saved.

However, SVG itself does not require that a specific script language be interpreted. For this reason, too, such scripts do not formally have the option of changing the content or meaning of a document while it is being viewed. With regard to accessibility and freedom from barriers, this should always be considered by authors who want to use scripts in documents.

Using the DOM, for example, new objects can be created that correspond to elements and their properties. The DOM representation of a document can react to user inputs such as mouse clicks and movements or can be generated completely algorithmically. This can be used in web applications (compare the graphics editor SVG-edit, diagrams in Google Docs or map applications).

The SVG standard defines the SVG DOM for manipulating SVG. It extends the standard DOM, which is the same for all XML types, with SVG-specific data types and functions, e.g. for graphic transformations ( affine mapping ). This interface is standardized for various programming languages ​​(for the standardized JavaScript subset ECMAScript, Java , Perl and Python ). JavaScript is used in many popular display programs for DOM manipulation.

### example

Variable Resistor.svg

The following example illustrates the use of an SVG document to display a simple vector graphic. It shows the basic structure of an SVG document as well as the use of the graphic primitives line , rect and polygon . The polygon that is used to represent the arrowhead is also rotated around the tip by 135 ° using a transformation.

The graphic variable Resistor.svg (circuit diagram of a potentiometer ) shown on the right is generated with the following, commented source text:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" baseProfile="full"
width="700px" height="400px" viewBox="0 0 700 400">

<!-- Anschlüsse links und rechts -->
<line x1="0" y1="200" x2="700" y2="200" stroke="black" stroke-width="20px"/>
<!-- Das Rechteck -->
<rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
<!-- Der Schleifer -->
<line x1="180" y1="370" x2="500" y2="50" stroke="black" stroke-width="15px"/>
<!-- Die Pfeilspitze -->
<polygon points="585 0 525 25 585 50" transform="rotate(135 525 25)"/>
</svg>


## Profiles

In SVG there are three profiles that are adapted for display on different output devices and each define the SVG standard to a different extent. They are specified in the root element (SVG) with the baseProfile attribute .

SVGT
( baseProfile = "tiny" ) SVG Tiny 1.1 is intended for very limited mobile internet devices (MID) and cell phones . It defines only a small subset of the SVG standard. SVG Tiny 1.2 is intended for significantly more powerful mobile devices and its features even go beyond SVG Full 1.1, but excludes some other parts of version 1.1.
SVGB
( baseProfile = "basic" ) is intended for slightly more powerful MIDs , but does not define the entire SVG standard.
SVGF
( Base profile = "full" , English "fully, completely") is intended for computer as an output device, and includes SVG full.

The use of profiles enables even low-performance devices to work with standard-compliant SVG files. Authors should therefore endeavor to present the central content with the limited range of functions in a meaningful way, so that the additional options of the full profile used are not essential for understanding the content. Display programs can of course also use such information to warn the user that the program may not be able to display all content correctly if a version or profile is used that is not implemented in the program.

## distribution

### Desktop

Some desktop environments use SVG as the format for program icons , background images or mouse pointers . The additional resource consumption for rendering is compensated for by increasing hardware resources , for example directly taken over by graphics cards . Exemplary projects are the Oxygen Project for KDE and the Tango Desktop Project for Gnome .

### Editors

#### Programs that can be used to create and edit SVG files

• Adobe Illustrator ( proprietary ; Windows, Mac OS)
• Affinity Designer (Windows, Mac OS)
• Apache OpenOffice - native import and export with restrictions ( free office package)
• Aphalina Designer - vector-based, book-oriented tablet app for Windows (free app, in-app purchases; SVG import and export (export as purchase option))
• Image editor - a didactic source text editor for learning simple image coding (free software; browser-based - uses SVG, the browser DOM and JavaScript for editing)
• CorelDRAW (proprietary; Windows, Mac OS)
• Inkscape - graphics and drawing program (free software; Linux / Unix, Windows, Mac OS X; uses SVG as the native file format (with Inkscape extensions))
• LibreOffice - native import and export with restrictions (free office package)
• Microsoft Visio (proprietary; Windows)
• PhotoLine (proprietary; Windows, Mac OS)
• Scribus (free software; Unix, Linux, Mac OS X, OS / 2, Windows)
• SVG-edit - graphics editor, can be used online and offline (free software; browser-based - uses SVG, the browser DOM and JavaScript for editing)
• Xara Designer Pro - graphics and drawing program (proprietary for Windows)

SVG files generated by editors often contain unnecessarily primitive, unnecessarily numerous elements with stereotypical repetition of partially ineffective attributes and are therefore slightly larger by a factor of 2 to 100. The creation of basic shapes with certain symmetries, such as an isosceles triangle or a cluster of arrows with uniform tips, can be done quickly and precisely in the source code, with a graphic editor only quickly or reasonably precisely.

### SVG interpretation in display programs

SVG was designed primarily for the World Wide Web . Modern display programs (including so-called web browsers ) can display large parts of it correctly, i.e. In other words, you do not need an additional SVG program (browser plug-in ). The range of functions actually available depends heavily on the display program. For example, the above-mentioned blurring filter is only available from version 10 and animations are not available at all for Internet Explorer. In some programs, SVG fonts are also completely ignored.

Based on the official SVG test suite, Opera 11.01 achieved the highest level of support for SVG 1.1 among the popular browsers at the beginning of 2011 with 95.44% of the possible points, and Internet Explorer 9.0, the most incompatible browser at the time, only 59.64%. It should be noted that the test suite for the SVG recommendation is not used to test the functional scope of display programs, but vice versa, to determine whether features of the recommendation have been implemented and can be implemented. The tests were therefore not developed independently of the authors of the recommendation and some of the authors of the tests are also employees of the companies that develop and offer the display programs. So it is not a systematic and independent test of the capabilities of the programs. So it is not necessarily a good indication of how likely it is that a "normal" SVG document will be presented correctly, because "normal" documents usually use many features, but tests on SVG specifications almost only use those with the document tested features. The weighting and use depends more on the complexity of the features and the implementation, not on the typical use in "normal" documents by authors.

Other approaches tend to ask whether certain features are really useful for authors. Here, too, as with the official test suite, it is of course advisable to go through the individual test examples in detail and to see to what depth and in what combination with other features the test was carried out and how independent the authors of the tests were from those of the recommendation and the providers of the display programs in order to come to a reliable statement regarding the usability for authors and viewers.

For example, the company Savarese Software Research offers an extension for Internet Explorer in version 6 to 8. Known since the beginning of SVG, but no longer developed, is also a corresponding extension of the Adobe company, which was practically the dominant program for the presentation of SVG in the early years of SVG.

Some JavaScript - Libraries (eg. Dojo .gfx, Raphael , SVG Web ) offer the possibility to describe picture elements in JS syntax. If SVG is not interpreted, a document object interpreted by the display program can be generated automatically via this detour (e.g. VML or Flash ), otherwise an SVG is generated directly. However, all of this can mean that not all of the possibilities offered by SVG can be used. So it does not have to be possible to transform everything from one language to another or to be able to be transformed by the library used, in addition to the problem that an interpretation of the scripting language used does not necessarily have to be available in full or at all. The method is therefore more suitable as an alternative that can be actively selected by the viewer, not as a blanket solution.

With Acid3 there is a test that presentation programs to some extent checked to see if they can correctly display SVG. Safari (4.0), Opera (10.0) and Chrome (4.0) have achieved full marks in that test since 2009, Mozilla Firefox (4.0) since 2011 and Internet Explorer (10.0) since 2012.

### Office software interoperability

The import of SVG is possible from Microsoft Office 2016 and is now available on all platforms. Also support LibreOffice and Apache OpenOffice the import of SVG.

### Interpretation by search engines

Since September 2010, Google has been considering SVG when searching for images. In addition to JPEG , GIF , PNG , Bitmap and WebP , SVG is one of six graphic formats that Google takes into account. Bing now also takes SVG into account.

Text alternatives and structured meta information that can be analyzed by programs are also of particular importance for search engines in order to be able to provide information about the content of a graphic. The possibilities of SVG as XML format are equivalent or superior to those of the raster graphic formats mentioned and can also be easily added by authors without special programs.

## The Graphical Web

The Graphical Web conference took place once a year from 2002 to 2016 , at which current developments in the SVG environment were presented in lectures and workshops.

## literature

Wikibooks: SVG  - learning and teaching materials
Commons : SVG Samples  - Album with pictures, videos and audio files
Commons : Hand-SVGs  - Collection of graphics that were manually created with text editors
Commons : Simplifications  - Examples of manually simplified graphics

## Individual evidence

1. M Media Type registration for image / svg + xml
2. CanIUse: SVG
3. Daniel Geiser: The advantages and disadvantages of the SVG format in responsive web design. new time design Scherrer & Grasso, September 30, 2015, accessed on January 12, 2019 .
4. Introduction - SVG 1.1 World Wide Web Consortium , January 14, 2003
5. SVG Requirements
6. Scalable Vector Graphics (SVG) 1.0 Specification
7. ^ SVG Mobile Requirements
8. Scalable Vector Graphics (SVG) 1.1 Specification
9. Mobile SVG Profiles: SVG Tiny and SVG Basic
10. Scalable Vector Graphics (SVG) 1.1 (Second Edition)
11. Scalable Vector Graphics (SVG) Full 1.2 (Working Draft)
12. Scalable Vector Graphics (SVG) Tiny 1.2 Specification
13. SVG2 Planning Page. Retrieved January 30, 2015 .
14. SVG2 Requirements Commitments. Retrieved July 8, 2015 .
15. w3.org: Scalable Vector Graphics (SVG) 2
16. w3.org
17. ^ SVG - Coordinate Systems, Transformations and Units. W3C, January 14, 2003, accessed September 10, 2009 .
18. SVG - base units. CSS4You, October 20, 2006, accessed September 3, 2009 .
19. SVG - styling. W3C, January 14, 2003, accessed September 10, 2009 .
20. ^ SVG - The transform attribute. Retrieved August 28, 2009 .
21. Website of SVG-edit
22. Introduction to Using Chart Tools on Google Developers
23. Mappetizer
25. Mobile SVG Profiles: SVG Tiny and SVG Basic. W3C, accessed August 29, 2009 .
26. see also: Oxygen Project in the English language Wikipedia; Developer homepage
28. Affinity Designer - Professional software for graphic design. Retrieved on February 6, 2018 (German).
29. Aphalina Designer , Aphalina Homepage
30. Kevin Reuss: Image editor. In: Image editor - a didactic image editor for learning simple image coding. Kevin Reuss, March 1, 2019, accessed June 10, 2020 .
31. informatik.schule.de - portal for computer science lessons. Retrieved June 10, 2020 .
32. SVG-edit , project at GitHub
33. See the regularly updated link under “Try SVG-edit here” .
34. SVG Test Suite results. codedread.com, March 24, 2011, accessed March 27, 2011 .
35. Compatibility table for support of SVG in desktop and mobile browsers. Retrieved January 20, 2013 .
36. Savarese plugin
37. Release Notes for Monthly Channel Releases in 2016