Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a graphics format where images are specified using primitives defined in plain text. For example, there are circle and rect (rectangle) tags that generate simple shapes. It is an excellent format for graphics that can be defined using outlines and simple coloring as the file sizes are typically smaller than raster formats such as webp and png, and the quality is higher because they do not suffer from the blockiness that can occur with other formats. See the SVG page on Wikipedia for more details.

This page contains some notes on using SVGs that I learned the hard way when building this site.

Including an SVG

There are several ways to include an SVG that's contained in an external file in an HTML page. The following are some of the techniques with the advantages and disadvantages.

Using an <img> tag

    <img src="globewiththumbtack.svg" width="100px">

Treats the SVG like an image. Some CSS and interactive elements (like hover) don't work.

Using an <svg> tag

    <svg>
        <use href="globewiththumbtack.svg#thumbtack" width="100px"/>
    </svg>

Allows elements in an external SVG file to be used, but seems to need to be given the id of something in the file which is then included. Including the file without specifying an id as a fragment to the URL results in nothing being displayed.

Using an <object> tag

    <object type="image/svg+xml" data="globewiththumbtack.svg" width="100px"></object>

CSS and interactive elements (like hover) work. However, mouse events are passed directly to the SVG, so, e.g., an SVG object wrapped in an <a> tag does not load the hyperlinked page when it is clicked.