BSBlog » Blog Archive » Using SVG on the Web

BSBlog » Blog Archive » Using SVG on the Web

Inline SVG is an attractive option because it doesn’t require an external file. Unfortunately, inline SVG has one significant problem: authors are forced to use XHTML and the application/xhtml+xml MIME type, instead of standard HTML and the text/html MIME type. XHTML is not a very forgiving language, and one I would generally discourage.

The <object> element is the generic HTML mechanism for embedding external content. It can be used just like an <iframe> for external HTML document. It can be used to embed plugin-rendered content such as Flash, and it can be used to embed SVG:

<object type="image/svg+xml"
        data="http://benjamin.smedbergs.us/blog/wp-content/uploads/2008/12/svg-document1.svg"
        width="250" height="250">
  Alternate markup here. If you see this, your browser may not support SVG, or a content aggregator may have stripped the object element.
</object>

'param' Example

To pass parameters to an SVG, use the <object> element with child elements. Each element should have name/value pairs with the 'name' and 'value' attributes; these will be exposed to the embedded SVG document.
<object type="image/svg+xml" data="params.svg" style="width: 150px; height:150px; display:inline;">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>

function SetParams() {
    var paramArray = [];
    if (document.defaultView.frameElement) {
        var params = document.defaultView.frameElement.getElementsByTagName("param");

        for (var i = 0, iLen = params.length; iLen > i; i++) {
            var eachParam = params[i];
            var name = eachParam.getAttribute("name");
            var value = eachParam.getAttribute("value");

            paramArray[name] = value;
        }
    }

    var light = document.getElementById("light");
    var label = document.getElementById("label");

    light.setAttribute("fill", paramArray["color"]);
    label.appendChild(document.createTextNode(paramArray["label"]));
};