Skip to main content
Search IntMath

Home | Math Display Experiments | SVG Display Options

Page by Murray Bourne, Last updated: 07 Jul 2019

SVG Display Options

On this page...

1. In-line SVG

The following svg is inline within the page, using these tags:

<svg> ... </svg>.


  • When using svgPHPGrapher, this is the simplest solution


  • Since the svg is part of the page, it is not indexed separately by Google, so doesn't appear in image search

2. SVG called with <img> tag

The following svg is called using something like:

<img src="svgphp-ojvnnw-24.svg" width="310" height="230" />.

mathematical SVG graph


  • svg image is indexed by Google, as it is a separate file
  • It can be re-sized easily, by just changing the image dimensions, like this (I used width="500" height="300"):

mathematical SVG graph


  • While the svg's internal style is applied, it cannot "find" @font-face Web fonts (note the axis lables are not in the correct font)
  • It's an extra server call for each <img> tag. Bandwidth will be almost identical, but it takes the server time to find the file, then deliver it to the browser
  • Any overlaid html (like text elements that cannot be realised with SVG's internal <text> element) will not be included with the SVG file, hence not indexed.

One solution - use javascript to load the image into the DOM

This next one uses the <img> tag, then I've used jQuery to pull the contents into the HTML flow. This means the styling works properly (it recognizes the @font-face Web fonts), and I can do other messing around via javascript (like changing the background color).

I'm targetting this one using class="loadMe".

mathematical SVG graph

3. SVG called with <object> tag

The following svg is called using:

<object type="image/svg+xml" data="svgphp-ojvnnw-15.svg" width="310" height="200" />.


  • You can modify the SVG using javascript (I've changed the background to yellow)
  • The svg source is indexed by Google
  • The internal style sheet is recognised and applied, including @font-family Web fonts
  • Can scale the SVG file. For example, the following object has width="500" height="300" (and then a smaller one following). For this to work, you need to set the viewport as follows:
    preserveAspectRatio="xMinYMin meet" viewBox="0 0 310 200".


  • Need to explicitly add the @font-family URLs to the SVG style sheet (does not get this from the parent HTML style sheet)

4. SVG called with <iframe> tag

The following svg is called using:

<iframe src="svgphp-ojvnnw-8.svg" width="310" height="310"></iframe>.


  • Appears to be no advantages over <object> tag.


  • Need to close iframe tag as: ...></iframe> in HTML (not self-closing).
  • Need to add iframe{border:none} to CSS.

Current grapher version = svgPHPGrapher2018-12-18.php

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.