Content

Scalable Vector Graphics (SVG)
 SVG Document
  Example of a Simple Embedded SVG Document
  Example of a Simple Self-Contained SVG Document
 SVG Element Tags
 SVG Presentation Attributes
 Sources and References

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a XML-based markup language for describing two-dimensional graphics. Besides vector graphic shapes SVG also images and text. An SVG image is defined in a XML text file, therefore it can be created and edited with a text editor. And a scalable SVG image can be rendered at any size without loss of quality.

SVG Document

An SVG document is a structured document according to the SVG standard or specification …

SVG document is used to describe a two-dimensional image.
SVG document is also commonly called SVG image.
SVG document contains SVG tags and plain text in a structured form.
Basic structure of a SVG document: <svg>…</svg>.
SVG document can be saved as a self-contained document or file with extension ".svg" or can be embedded inline as a fragment within a praent HTML or XML document.

Example of a Simple Embedded SVG Document

Example of a Simple Embedded SVG Document:

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Embedded SVG Examples:</h1>
           <svg width='30' height='30'>
               <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
           </svg>
    </body>
</html>

HTML Web Page Embedded Output:

Example of a Simple Self-Contained SVG Document

Example of a Simple Self-Contained SVG Document:

SVG Code Input:

<?xml version="1.0" standalone="no"?>

    
<svg width='30' height='30' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
</svg>

HTML Web Page Embedded Output:

SVG Element Tags

SVG element tags are elements used to construct a SVG image. For example,

<circle> ,<line> define basic shapes
<svg> defines a container
<font> defines a font style
<text> defines a text content
<image> defines a renderable element

SVG Presentation Attributes

SVG presentation attributes are properties used as attributes for both SVG specific and CSS rendering. For example,

d: defines a SVG path to be drawn.
stroke-dasharray, stroke-linecap, stroke-linejoin : defines properties of SVG path to be drawn
transform: defines transforms to be applied.
color, fillcolor, fill: defines CSS properties for rendering
display, font-family: defines general CSS properties for rendering