svg Animating SVG with CSS

13. Adding interactivity

The lowest level of interactivity is declarative interactivity—animation or other style changes created by telling the browser what should happen under certain situations, without directly controlling the effect with a script. SVG provides a limited set of builtin interactive states.

13.1 Using Links in SVG

You can link to another SVG file or, depending upon your environment, a web page.

Example 1 for all browsers

<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <a xlink:href="cat.svg" href="cat.svg">
         <text x="100" y="30" style="font-size: 12pt;">Cat</text>
     </a>
     <a xlink:href="https://www.w3.org/groups/wg/svg/" href="https://www.w3.org/groups/wg/svg/">
         <circle cx="50" cy="70" r="20" style="fill: red;"/>
         <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
         <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
     </a>
 </svg>

Example 1 for modern browsers

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <a href="cat.svg">
        <text x="100" y="30" style="font-size: 12pt;">Cat</text>
    </a>
    <a href="https://www.w3.org/groups/wg/svg/">
        <circle cx="50" cy="70" r="20" style="fill: red;"/>
        <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
        <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
    </a>
</svg>

Claude Opus 4.5 explanation about namespace declarations

SVG Namespace Declarations

Both:

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"

are namespace declarations, but they serve different purposes:

The namespace declaration xmlns="http://www.w3.org/2000/svg" is the default namespace for SVG. It tells the browser "all elements in this document are SVG elements."
Without it, the browser wouldn't know how to interpret <circle>, <rect>, <path>, etc.

<svg xmlns="http://www.w3.org/2000/svg">
                <circle .../>  <!-- browser knows this is an SVG circle -->
            </svg>

The namespace declaration xmlns:xlink="http://www.w3.org/1999/xlink" declares the xlink namespace with the prefix xlink:.
It was used in SVG 1.1 for linking-related attributes.

<svg xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <a xlink:href="...">  <!-- xlink: prefix uses the xlink namespace -->
            </svg>

Summary Table

Declaration	Purpose	Required?
`xmlns="http://www.w3.org/2000/svg"`	Default SVG namespace	Yes (for standalone SVG files)
`xmlns:xlink="http://www.w3.org/1999/xlink"`	XLink namespace for `xlink:href`	Only if using `xlink:` attributes

href vs xlink:href

Attribute	SVG Version	Browser Support
`xlink:href`	SVG 1.1 (old)	All browsers
`href`	SVG 2 (current)	All modern browsers

Note: When SVG is inline in HTML5, the xmlns is optional because the browser already knows <svg> means SVG. But in standalone .svg files, it's required.

<svg width="200" height="100">
    <a href="cat.svg">
        <text x="100" y="30" style="font-size: 12pt;">Cat</text>
    </a>
    <a href="https://www.w3.org/groups/wg/svg/">
        <circle cx="50" cy="70" r="20" style="fill: red;"/>
        <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
        <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
    </a>
</svg>

Styling links

You can use CSS pseudoclasses to give users some feedback about the interactive elements of your graphic.
Like a CSS class, a pseudoclass is used to apply styles to select instances of an element;
unlike true classes, they are applied automatically, not assigned in the class attribute.

The :hover pseudoclass applies when the main mouse pointer is over an element, while
the :focus pseudoclass applies when an element has the keyboard focus.

You can often use the same styles for both element:hover and element:focus, because both indicate the potential for user action.

<svg width="200" height="100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css"><![CDATA[
    a.words:hover, a.words:focus {
       text-decoration: underline;
       font-weight:bold;
    }
    a.shapes:hover, a.shapes:focus {
       stroke: #66f;
       stroke-width: 2;
       outline: none; /* over-ride default focus formatting */
    }
    ]]>
  </style>

  <a class="words" xlink:href="cat.svg">
    <text x="100" y="30" style="font-size: 12pt;">Cat</text>
  </a>

  <a class="shapes" xlink:href="http://www.w3.org/SVG/">
    <circle cx="50" cy="70" r="20" style="fill: red;"/>
    <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
    <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
  </a>
</svg>