SVG

Scalable Vector Graphics

SVGSVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

What you should already knowBefore you continue, you should have some basic understanding of the following:

HTML

Basic XML

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define vector-based graphics for the Web

SVG defines the graphics in XML format

Every element and every attribute in SVG files can be animated

SVG is a W3C recommendation

SVG integrates with other W3C standards such as the DOM and XSL

AdvantagesAdvantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor

SVG images can be searched, indexed, scripted, and compressed

SVG images are scalable

SVG images can be printed with high quality at any resolution

SVG images are zoomable

SVG graphics do NOT lose any quality if they are zoomed or resized

SVG is an open standard

SVG files are pure XML

How to create SVG images ?SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program, like Inkscape.

You can embed SVG elements directly into your HTML pages.

="100" height="100">
    cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" / >

Code explanation:

An SVG image begins with an element

The width and height attributes of the element define the width and height of the SVG image

The element is used to draw a circle

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's center is set to (0, 0)

The r attribute defines the radius of the circle

The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"

The fill attribute refers to the color inside the circle. We set the fill color to yellow

The closing tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!