Skip to main content

Home | Math Display Experiments | SVG Display Options

Page by Murray Bourne, IntMath.com. Last updated: 31 Jan 2016

SVG Display Options

On this page...

1. In-line SVG

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

<svg> ... </svg>.

Advantages

Disadvantages

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

Advantages

mathematical SVG graph

Disadvantages

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

Advantages

Disadvantages

4. SVG called with <iframe> tag

The following svg is called using:

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

Advantages

Disadvantages/Notes

Current grapher version = svgPHPGrapher2018-09-26.php

Search IntMath, blog and Forum

Search IntMath