Display <svg> in iOS Browser using <html> without the use of the <embed> Tag_问答_开发者

Display <svg> in iOS Browser using <html> without the use of the <embed> Tag

开发者 https://www.devze.com 2023-04-08 16:30 出处：网络

Is it possible to display <svg> content inside an <html> in an iOS 开发者_如何转开发browser without the use of the <embed> or <img> tags which require me to store the<svg>

相关专题：svg

Is it possible to display <svg> content inside an <html> in an iOS 开发者_如何转开发browser without the use of the <embed> or <img> tags which require me to store the <svg> content in a separate file?

The embedding of <svg> content inside <html> seems to work on all other modern browsers (IE9, Chrome, even Safari on Window!).

I have found some references that suggest changing the content-type to 'text/xml' might work, but I am not able to change it as my code is running as part of a mobile server control in SharePoint 2010.

My page contains several <svg> areas, each of which displays a simple graph. The data for these graphs is stored in a serialized object which needs to be deserialized before the svg polylines can be drawn. Since the deserialization process is time-consuming I prefer to do it once and generate all graphs in a single pass, rather than generating resource references to individual svg files which can be referenced by an <embed> tag.

Edit: There are indications that inline <svg> is supported in iOS5.

If you need to embed the SVG directly in the document

Use XHTML (not just HTML), serve it with the correct mime type, and your SVG will work correctly in all major browsers, including on the iPhone and iPad.

This example file uses inline SVG in XHTML, and even uses JavaScript and CSS in the host document to manipulate the SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml

It works fine in iPhone/iPad.

If you need to reference an external file

Use the <img> tag to reference your SVG directly. This works on iOS.

For example, open this on your iPhone/iPad:
http://phrogz.net/SVG/svg-via-img.html
which references
http://phrogz.net/SVG/heart.svg

Note that there is a bug with WebKit related to rendering variable-sized SVGs inside fixed-size <img> tags. (It appears to draw the aspect ratio for the SVG from the aspect ratio of the containing window instead of the dimensions of the <img> element.) You can see the weirdness in Chrome or Safari if you resize your browser window with that test file.

You may need to use inline SVG inside an XHTML compound document. In this case, XML namespaces are used for both the HTML root element and the inline SVG element. See here for a relevant example:
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

Other useful examples may be found here:
http://www.croczilla.com/bits_and_pieces/svg/samples

Have you tried using <object>? I haven't done this in a while but you can Google for that.