Difference between revisions of "SVG (Scalable Vector Graphics)"
Ralph.ebnet (talk | contribs) |
Ralph.ebnet (talk | contribs) (→Definition) |
||
| Line 7: | Line 7: | ||
Many established graphic programs such as Adobe Illustrator or the free and open-source Inkscape Illustrator use the Scalable Vector Graphics format. This format makes it relatively easy to describe a vector graphic or animation and display it in a web browser. | Many established graphic programs such as Adobe Illustrator or the free and open-source Inkscape Illustrator use the Scalable Vector Graphics format. This format makes it relatively easy to describe a vector graphic or animation and display it in a web browser. | ||
| − | SVG files are defined in a tree structure composed of individual elements. Similar to a CSS file, attributes are assigned to these elements. SVG is based on the syntax of XML, so each SVG file begins with an XML and a [[HTML Doctype|Doctype]] declaration. XML is a declarative markup language used primarily to represent hierarchically structured data in text file format. The main advantage of XML files is that they can be read by both machines and humans. | + | SVG files are defined in a tree structure composed of individual elements. Similar to a CSS file, attributes are assigned to these elements. SVG is based on the syntax of XML, so each SVG file begins with an XML and a [[HTML Doctype|Doctype]] declaration. XML is a declarative [[Markup Language|markup language]] used primarily to represent hierarchically structured data in text file format. The main advantage of XML files is that they can be read by both machines and humans. |
== Creation of SVG graphics == | == Creation of SVG graphics == | ||
Revision as of 16:23, 4 October 2020
Contents
Definition
SVG (Scalable Vector Graphics) is a web standard for the description of two-dimensional graphics. The SVG file format is based on XML (Extensible Markup Language) and was first published by a working group of the World Wide Web Consortium (W3C) in 2001. It can be used to describe two-dimensional objects (graphics or animation) that can be scaled without loss of quality. Although in the beginning, many web browsers had problems displaying SVG content, nowadays all relevant internet browsers are capable of displaying Scalable Vector Graphics.
Many established graphic programs such as Adobe Illustrator or the free and open-source Inkscape Illustrator use the Scalable Vector Graphics format. This format makes it relatively easy to describe a vector graphic or animation and display it in a web browser.
SVG files are defined in a tree structure composed of individual elements. Similar to a CSS file, attributes are assigned to these elements. SVG is based on the syntax of XML, so each SVG file begins with an XML and a Doctype declaration. XML is a declarative markup language used primarily to represent hierarchically structured data in text file format. The main advantage of XML files is that they can be read by both machines and humans.
Creation of SVG graphics
Because SVG is a vector format, most users create such graphics in Adobe Illustrator. The SVG format allows you to use most of the effects possible with Adobe Illustrator. However, for complex multi-level gradients, you should be aware that some colors might be displayed differently in web browsers. It is important to define each path clearly and accurately, as even minimal changes can lead to visible color fringes in browsers. This is especially true for scaled SVG graphics.
Even if SVG is primarily a scalable vector format, you should always pay attention to the pixel grid when creating these graphics in Adobe Illustrator. Adobe Illustrator CC 2016 introduced a new way to align with pixels. This allows you to adjust how individual elements behave when scaled or moved, effectively preventing unwanted color fringing. Ideally, you want to create the SVG image the same size as it will be used later, for example on a website. Although the dimensions of the graphic have no direct influence on the file size, this approach usually leads to better results in browsers.
In order to use a Scalable Vector Graphic created with Adobe Illustrator externally, such as on a website, it must first be exported. When exporting SVG files, users have two different options. The graphics can be provided both in the file format and as source code. This results in different options for integrating SVG into a website. The easiest way to export SVG graphics with Adobe Illustrator is to select the corresponding elements and copy them to the clipboard via "Edit > Copy". You can then paste the SVG code directly into an HTML page. Another way would be exporting and saving the file in SVG format. You can do this by clicking the "File" option and then "Export". The following drop-down menu lets you select "Scalable Vector Graphic (.svg)" as file format.
Advantages and reasons for use
The SVG format offers numerous advantages over other image formats in modern web development. It is compact, vector-based, and even editable via text editors due to XML. Since SVG is based on vectors, it can be scaled without any visible loss of quality. Especially in responsive web design, all elements of an HTML page are scaled to different dimensions depending on display size. With traditional image formats, such as JPEG or PNG, this is problematic at certain resolutions, as image content might become grainy. While scaling photos beyond 100 % is not perceived as irritating, especially logos appear unclean and pixelated when scaled. Scalable Vector Graphics, however, are always sharp and crystal clear.
Another major advantage of the SVG format is its integration with CSS Media Queries. Layouts developed as part of responsive web design automatically adapt to the size of the display (viewport) via CSS Media Queries. SVG graphics can be integrated into HTML elements and controlled via media queries so that they adapt to the width of the browser window. Especially more detailed vector graphics cannot unfold properly on smaller displays with low pixel density. In this case, designers and developers have the option of simply hiding unnecessary details via CSS.