SVG is an acronym for Scalable Vector Graphics and is a language for describing two-dimensional graphics in [XML]]. W3C recommends SVG as the default for two-dimensional vector graphics. The file contains the extension.svg.

The contents of SVG files are easily accessible due to the XML-based format and can be easily translated by web browsers. SVG allows three types of graphical objects: vector graphic forms (e.g. consisting of lines and curves), images and text. Graphical objects can be grouped, transformed and merged into previously rendered objects.

The feature set includes nested transformations, clipping paths, alpha masks, filter effect, and template objects.

Implementation in HTML

SVG files can be implemented in HTML pages using the following tags: <embed>, <object>, <iframe>. SVG code can either be implemented directly into an HTML page or linked to an SVG file from the HTML code.

Implementation with <embed>

Advantage: Supported by all common browsers

Disadvantage: Considered outdated in HTML4 and XHTML (but suitable for HTML5)


<embed src="bild.svg" type="image/svg+xml" />

Implementation with <object>

Advantages: Supported by all common browsers. Applies as default in HTML4, XHTML and HTML5.

Disadvantage: Scripting is not allowed


 <object data="circle1.svg" type="image/svg+xml"></object>

Implementation with <iframe>

Advantage: Supported by all common browsers

Disadvantages: Creates a border without a specific style. Not supported in HTML4/XHTML.


 <iframe src="circle1.svg"></iframe>

Implementation directly in HTML

In the browsers Firefox, Internet Explorer 9, Google Chrome, Opera and Safari you can implement the SVG code directly into the HTML code.


 <svg xmlns="" version="1.1">
 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="white"/>

Link SVG file

You can also use the <a> tag for linking an SVG file.

<a href="bild.svg">Zeig die SVG-Datei an</a>



Related Articles