Menu
I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.
Example at: http://www.invalidpage.com/svg/svgtest.html
Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>SVG iPhone Test</title> </head> <body> <div> <svg width="500" height="220"> <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect> </svg> </div> </body> </html> 
730
The mobile safari browser supports some features of HTML5, but not others. Inline SVG is part of the HTML5 draft specification, but is not yet included in the mobile safari browser.
SVG is quite well-supported in mobile browsers. This means that you can link to a SVG file on your page in most mobile browsers and it just works. But… there is one big problem: Android versions under 3 don't have any kind of support for SVG in the stock browser.
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
Root Cause. The problem is as the graphic becomes smaller there are less pixels to work with. When rendering the SVG the browser is using equations to determine pixels but the equations result in numbers that fall in between pixels.
Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>SVG iPhone Test</title> </head> <body > <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect> </svg> </body> </html> The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is "Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.
Not sure if Ipad cares about the Content-Type but other browsers do.
Updated
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect> </svg> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
