SVG

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, or interactive and uses XML (eXtensible Markup Language) as the structure for commands. SVG integrates with DOM (Document Object Model) and XSL (eXtensible Stylesheet Language).

How does an SVG work?

SVGs are created using x and y coordinates for shapes, lines, and curves. These images can then be stroked 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.

Zoom In  Zoom Out

How does an SVG compare to PNG and JPEG?

Compared to PNG (Portable Network Graphics) or JPEG (Joint Photographic Experts Group), 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.

SVG	PNG	JPEG
May include animation and interaction.	Static.	Static.
Not reasonable.

How do you create or edit an SVG file?

SVGs are often created and edited using a vector art program, like 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 (HyperText Markup Language) looks like this.

Example code

<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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, TLA