Core HTML

Lesson 31: Using SVG

Overview

In this HTML lesson, we demonstrate how to insert SVG into HTML documents. SVG stands for Scalable Vector Graphics, and it is a large topic that we will take up in another series. Here, we only intend to show how SVG can be included in HTML. We show that it can be inserted directly as an element. However, SVG can be saved in its own image file. These files can then be used as a source for an image element, just like any other image file.

A Simple SVG Example

Our first example demonstrates how to include a simple svg element in an HTML document. The size of the svg element is set to 500 by 300 pixels via the width and height attributes. Inside the svg element, we have an ellipse element and a rect element. These draw an ellipse and a rectangle, as expected. The rectangle is only used to mark the boundary of the svg element and runs along its border. Any SVG drawing outside this rectangle is clipped because it lies outside the svg element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300">
      <ellipse cx="250" cy="150" rx="200" ry="100"
        fill="darkkhaki" stroke="olive" stroke-width="5"/>
      <rect x="0" y="0" width="500" height="300"
        fill="none" stroke="gray" stroke-width="1"/>
    </svg>
  </body>
</html>
 

Output

 

An SVG Image

An svg element can be saved independently as a file and used as an image. When saving an svg element as an image, save it with the .svg extension, as we do in this example. This image is 400 by 550 and displays a cross with a rectangle boundary. It is saved as "Cross.svg" so that it can be used as an image. We can open this SVG file in our browser, just like an HTML file.

Cross.svg

<svg width="400" height="550" xmlns="http://www.w3.org/2000/svg">
  <path d="M175,25 H225 V175 H375 V225 H225 V525 H175 V225 H25 V175 H175 Z"
    fill="saddlebrown" stroke="peru" stroke-width="5"/>
  <rect x="0" y="0" width="400" height="550"
    fill="none" stroke="gray" stroke-width="1"/>
</svg>
 

Output

 

SVG as an Image Source

If we have an SVG file, we can use it as the source for an image element, as we do in this example. As expected, this displays the same cross and rectangle boundary that we have in our SVG image.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="Cross.svg">
  </body>
</html>
 

Output

 

Scaling an SVG Image

We can scale an SVG image, just like any other image. In this example, we use our SVG image as the source for three image elements with different scaling factors. This demonstrates how SVG images scale well, without distortion, because they are based on geometry rather than pixels.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="Cross.svg" width="200" height="275" />
    <img src="Cross.svg" width="100" height="275" />
    <img src="Cross.svg" width="200" height="100" />
  </body>
</html>
 

Output

 

Using SVG Images and Elements Together

As we have seen, we can use SVG both directly in an svg element and externally as the source for an image element. In this example, we have five SVG graphics: four elements and one image. The boundaries around the SVG graphics illustrate that SVG has a thin built-in margin.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body style="margin:0px;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="550">
      <ellipse cx="50" cy="275" rx="40" ry="250"
        fill="tan" stroke="gainsboro" stroke-width="5"/>
      <rect x="0" y="0" width="100" height="550"
        fill="none" stroke="gray" stroke-width="1"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="550">
      <circle cx="50" cy="275" r="40"
        fill="black" stroke="gainsboro" stroke-width="3"/>
      <rect x="0" y="0" width="100" height="550"
        fill="none" stroke="gray" stroke-width="1"/>
    </svg>
    <img src="Cross.svg">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="550">
	  <circle cx="50" cy="275" r="40"
	    fill="black" stroke="gainsboro" stroke-width="3"/>
	  <rect x="0" y="0" width="100" height="550"
	    fill="none" stroke="gray" stroke-width="1"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="550">
      <ellipse cx="50" cy="275" rx="40" ry="250"
        fill="tan" stroke="gainsboro" stroke-width="5"/>
      <rect x="0" y="0" width="100" height="550"
        fill="none" stroke="gray" stroke-width="1"/>
    </svg>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.