Home | Math Display Experiments | SVG Display Options

SVG Display Options

On this page...

• 1. Inline SVG
• 2. SVG called with <img> tag
• 3. SVG called with <object> tag
• 3. SVG called with <iframe> tag

1. In-line SVG

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

<svg> ... </svg>.

Advantages

• When using svgPHPGrapher, this is the simplest solution

Disadvantages

• 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" />.

Advantages

• 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"):

Disadvantages

• 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".

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" />.

Advantages

• 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".

Disadvantages

• 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>.

Advantages

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

Disadvantages/Notes

• 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