Sideway from Sideway
Draft for Information Only


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" "">
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <h1>Embedded SVG Examples:</h1>
           <svg width='30' height='30'>
               <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
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=''>
   <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
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

Sources and References



ID: 210800028 Last Updated: 8/28/2021 Revision: 0 Ref:



  1., 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999

Home 5






Hobbies 8


Chinese 1097

English 337

Reference 68


Hardware 160


Application 205

Digitization 25

Latex 35

Manim 203

Numeric 19


Web 285

Unicode 504


CSS 65

SVG 46new


OS 422

DeskTop 7

Python 71new



Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 32new

Coordinate Geometry 2

Calculus 67

Complex Analysis 21


Tables 8


Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5


Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2022 Sideway . All rights reserved Disclaimers last modified on 06 September 2019