Scalable Vector Graphics
➔ SVG defines vector-based graphics in XML format, which does not depend on the pixels of a device.
➔ SVG graphics do not loose image quality if zoom in or zoom out.
➔ XML file can be created using any text editor.
➔ It is a W3C recommendation.
SVG Line
Key Features of Scalable Vector Graphics
➔ SVG is an XML-based language that defines two-dimensional vector graphics and can be used in web technologies.
➔ Unlike raster images, SVG maintains its image quality across devices.
➔ SVG images are defined using mathematical algorithms to maintain resolution in every state.
➔ SVG graphics are suitable for situations where responsive designs, images, logos are required without compromising image resolution.
➔ Graphics are created using XML text and therefore any text editor can edit and create SVG graphics.
The most common way to use SVG in HTML
➔ Using the svg tag in html code (Inline SVG): The SVG file can be embedded directly into an HTML document using the svg tag. This element will act as a self contained image container.
➔ Using the img tag with source: The external SVG file can be used in html using the img tag where the src attribute specifies the graphic location. The process is similar to other types of images such as .png, .jpg, etc.
➔ Using CSS style: The SVG file can also be referenced internally or externally by CSS. For example, background-image: url() uses the location for a graphic or image that will be used as the background for an element.
Show SVG file in html using img tag
<img src="mygraphic.svg" alt="Description of the image" width="350" height="200" />
Example: Show SVG file in html using img tag
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show SVG file in html using img tag Example</title>
</head>
<body>
<h2>Show SVG file in html using img tag Example</h2>
<img src="resources/media/mysvg-graphic.svg" alt="SVG Graphic Star" width="500" height="210" />
</body>
</html>
Click on the "Try it Now" button to see how it works.
Show SVG file in html using CSS style
.mydiv {
/* path of the SVG file */
background-image: url('image.svg');
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
}
Example: Show SVG file in html using CSS style
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show SVG in HTML using CSS Example</title>
<style>
.mydiv {
/* path of the SVG file */
background-image: url('resources/media/mysvg-graphic.svg');
width: 500px;
height: 210px;
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Show SVG in HTML using CSS Example</h2>
<div class='mydiv'>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example
<h2>HTML SVG Example</h2>
<svg height="250" width="600">
<line x1="10" y1="10" x2="400" y2="100" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>
Click on the "See output" button to see how it works.
SVG Circle
Example
<h2>HTML SVG Circle Example</h2>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
Click on the "See output" button to see how it works.
SVG Rectangle
Example
<h2>HTML SVG Rectangle Example</h2>
<svg width="200" height="100">
<rect width="200" height="100" stroke="red" stroke-width="4" fill="blue" />
</svg>
Click on the "See output" button to see how it works.
SVG Polygon
Example
<h2>HTML SVG Polygon Example</h2>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:gray;stroke-width:5;fill-rule:nonzero;" />
</svg>
Click on the "See output" button to see how it works.