SVG
SVG
SVG stands for Scalable Vector Graphics.
SVG defines vector-based graphics in XML format.
What you should already know
Before 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
Advantages
Advantages 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
- 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!
There are no comments yet.