Skip to main content
Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

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

Home | Math Display Experiments | SVG Display Options

Page by Murray Bourne, IntMath.com. 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>.

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-12-18.php

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