SVG

Updated: 07/31/2022 by Computer Hope
W3C SVG logo

Short for Scalar Vector Graphic, SVG is a file type created and defined by the World Wide Web Consortium in 1999. It defines vector graphics that are static, animated, and/or interactive, and uses XML as the structure for commands. SVG integrates with DOM and XSL.

How does an SVG work?

SVGs are created using x and y coordinates for shapes, lines, and curves. These images can then be stroked and/or filled with a color. Because they are mathematically defined and then scaled to fill the requested dimensions, an SVG image does not change in clarity and sharpness when getting bigger or smaller.


 

How does an SVG compare to PNG and JPEG?

Compared to PNG or JPEG, the SVG image is much clearer and sharper because the image objects are defined as shapes (lines, curves, and fills) and then scaled. Some images, such as realistic images of a forest or beach, would be too complex to render as SVG. The following table shows examples to compare each of the three file types.

SVGPNGJPEG
Computerhope logo as PNGComputerhope logo as JPG
May include animation and interaction.Static.Static.
Not reasonable.Raster graphic boats as PNGRaster graphic boats as JPG

How do you create or edit an SVG file?

SVGs are most often created and edited using a vector art program, such as Adobe Illustrator or Inkscape. Because the files are made up of text, they can be edited using a plain text editor.

What does an SVG's code look like?

A simple SVG's XML looks like this.

<svg width="200" height="200">
 <rect x="10" y="10" width="180" height="180" style="fill:#C7E2FC;stroke:#0378E2;stroke-width:5;opacity:1.0" />
 <circle cx="100" cy="100" r="50" fill="#C1C1C3" />
</svg>

This example creates the following image.

The first line starts the SVG tag and says how big the drawing area is. The second line draws a rectangle with the upper left corner at x 10, y 10 (the origin is the upper left corner at x 0, y 0). The rectangle is given both a fill and a stroke. The next line draws a circle, with the center x and y at 100, 100, with a radius of 50. This circle is then filled with grey. The final line closes XML's SVG tag.

Can the Computerhope logo be made with SVG?

The Computerhope logo as an SVG added to HTML looks like this.

Example code

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 225 225" style="enable-background:new 0 0 225 225;" xml:space="preserve" width="100" height="100">
<style type="text/css">
 .st0{fill-rule:evenodd;clip-rule:evenodd;}
 .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0378E2;}
</style>
<path class="st0" d="M147.83,15.04c0,0-30.84-13.94-68.75-0.63c-29.35,10.3-53.78,35.93-62.62,62.3
 c-5.83,17.4-17.62,61.96,23.74,107.26c43.58,41.23,94.94,27.32,94.94,27.32l11.88-37.08c0,0-36.7,7.75-65.8-8.06
 C43.41,142.41,43.61,99.3,59.75,76.42c29.7-43.33,75.67-24.22,75.67-24.22L147.83,15.04z"/>
<path class="st1" d="M157.73,19.16l-48.52,145.17c0,0,9.33,2.26,21.4,1.77c9.64-0.39,19.96-1.96,19.96-1.96
 s34.56-103.95,39.53-119.5c0.39-1.23-6.05-7.77-14.64-14.58C167.73,23.95,157.73,19.16,157.73,19.16z"/>
<path class="st1" d="M197.99,53.98l-50.63,153.58c0,0,43.32-12.36,61.27-59.56C229.07,93.89,197.99,53.98,197.99,53.98z"/>
</svg>

Example output


Absolute coordinates, Animation, BMP, Computer acronyms, Fill, GIF, Graphics, Image editor, Interactive graphic, Line art, Presentation graphics, Raster, Software terms, Sprite, Stroke weight