SVG


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.

svg.png

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.</iframe></object>

Implementation with <embed>

Advantage: Supported by all common browsers

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

Syntax:

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

Implementation with <object></object>

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

Disadvantage: Scripting is not allowed

Syntax:

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

Implementation with <iframe></iframe>

Advantage: Supported by all common browsers

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

Syntax:

<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.

Example

 
 
 
 
 
 
 

Link SVG file

You can also use the

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

Weblinks