Programming SVGs

Table of Contents

• <object>
• <switch>
• <script>
• SVG Methods
  • ?
  • ??
  • ???
• <foreignObject>

<object>

The <object> element allows for interactivy in a linked file, much the same way that Adobe Flash used to be added to a page. Older (much older) browsers might require the use of <embed> to use the browser’s SVG plugin.

Some features of SVGs will not work unless the SVG is embedded directly in the HTML, or embedded onto the page using an <object> element.

<object type="image/svg+xml" data="component.svg" width="100%" height="200" ></object>

Scripting and font imports don't work when the SVG is displayed using an <img> element.

<img src="component.svg" width="100%" height="200" />

<switch>

<switch> is an SVG element that can be used to check for the existence of SVG features or language support.

<switch>
  <text systemLanguage="es">Hola!</text>
  <text systemLanguage="en">Hello!</text>
  <text systemLanguage="hi">नमस्ते</text>
  <text systemLanguage="en-au">G'day!</text>
  <text systemLanguage="fr">Bonjour!</text>
  <text systemLanguage="en">I said, Hello!</text>
  <text>Fine then, I didn't want to say 'Hi' anyway.</text>
</switch>
            

requiredFeatures

The following switch statement was written to replace the animated SVGs with an animated gif in browsers that don’t support the SVG animation feature.

<switch>
  <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-animation">
    <circle class="loading-dot" cx="23" cy="50" r="8.9"/>
    <circle class="loading-dot" cx="50" cy="50" r="8.9"/>
    <circle class="loading-dot" cx="77.4" cy="50" r="8.9"/>
  </g>
  <image xlink:href="loading-dots-svg-backup.gif" x="0" y="0" height="100px" width="100px"></image>
</switch>
            

GIF included version

<script>

<script>
  function change(event) {
    var radius = event.target.getAttribute("r") == 15 ? 30 : 15;
    event.target.setAttribute("r",radius);
  }
</script>