Using Keyshape Animations on HTML Pages

Placing SVG with CSS animations on HTML pages

CSS animations without interactivity can be placed on HTML pages using the <img> tag. The src attribute points to the SVG file. The alt attribute can be used to give a textual explanation of the image for accessibility tools.

<img src="tickbox.svg" alt="Tickbox animation">

Placing interactive SVG animations and KeyshapeJS animations on HTML pages

Interactive CSS animations and KeyshapeJS animations must be placed on HTML pages using the <object> tag, like this:

<object data="tickbox.svg" type="image/svg+xml"></object>

The easiest way to use KeyshapeJS is to ensure that the KeyshapeJS library is included in the SVG file by choosing the Embedded option for the JS Library field in the Keyshape export dialog.

Note: The <img> tag cannot be used for animations containing interactivity or JavaScript, because Web browsers disable interactivity and JavaScript in <img> for security reasons.

Embedding SVG directly on HTML pages

If the filesize of the SVG file is small, then it can be embedded directly to a HTML page by copy-pasting the SVG code into the HTML code.

Open the export dialog in Keyshape, choose the desired export options and press the Copy to Clipboard button. Paste the code to a code editor. Here’s an example how CSS animated SVG code looks like inside HTML:

<!DOCTYPE html>
<html>
<body>

  <!-- start of the pasted SVG code here -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <title>Tickbox animation</title>
    <style>
  @keyframes a0_do { 0% { stroke-dashoffset: 270px; } 100% { stroke-dashoffset: 0px; } }
  @keyframes a1_do { 0% { stroke-dashoffset: 73px; } 100% { stroke-dashoffset: 0px; } }
    </style>
    <ellipse cx="64" cy="64" rx="42.5" ry="42.5" stroke="#dadada" fill="none" stroke-width="10"/>
    <ellipse rx="42.5" ry="42.5" stroke="#5742c9" fill="none" stroke-width="10" stroke-dasharray="270 270" stroke-dashoffset="270" transform="translate(64,64) rotate(-90)" style="animation: 1s linear infinite both a0_do;"/>
    <path d="M45 63l20 20l21-39" stroke="#dadada" fill="none" stroke-width="10"/>
    <path d="M0 0l20 20l21-39" stroke="#5742c9" fill="none" stroke-width="10" stroke-dasharray="73 73" stroke-dashoffset="73" transform="translate(45,63)" style="animation: 1s linear infinite both a1_do;"/>
  </svg>
  <!-- end of the pasted SVG code here -->

</body>
</html>

The SVG document may include the <title> element for accessibility tools. It is also shown as a tooltip when the mouse pointer moves over the SVG animation. The title text can be set in Keyshape by choosing the File > Document Properties menu option and by editing the Title field.

Note: The xmlns="http://www.w3.org/2000/svg" attribute isn’t needed for direct embedding and can be removed.

Accessibility

Informative animations should have a textual explanation in the accessibility attributes. For decorative animations, the alt attribute can be set to an empty string so that accessibility tools will ignore it.

You can read more about SVG accessibility at CSS-Tricks.

Document History

- Document created.