Menu
I'd like to put some inline SVG into a HTML5 document. While researching and testing, Firefox and Chrome (patched up to date at the time of writing this) showed weird behavior when the document was served using different MIME types.
First please consider the following minimal HTML5 document which works as expected if it is served as text/html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
div {
background-color: orange;
}
svg {
display: block;
}
circle {
stroke: black;
fill: black;
}
</style>
</head>
<body>
<div>
<svg width="28pt" height="28pt" viewbox="0 0 14 14">
<circle cx="7" cy="7" r="6" />
</svg>
</div>
</body>
</html>
As the JSFiddle shows, this is rendered as expected: The black circle fills the svg and the wrapping div nearly completely in height (the center of the circle is at 7, i.e at half height, because the user coordinate system goes from 0 to 14 in height).
Now please consider the same document in XHTML5 variant and let it serve as application/xhtml+xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
div {
background-color: orange;
}
svg {
display: block;
}
circle {
stroke: black;
fill: black;
}
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="28pt" height="28pt" viewbox="0 0 14 14">
<circle cx="7" cy="7" r="6" />
</svg>
</div>
</body>
</html>
I can't provide a JSFiddle for that one because I don't know how to make JSFiddle (or similar sites) serve a document as application/xhtml+xml.
Anyway, the black circle now is only about one third the height of its containing svg and wrapping div. It seems that Firefox and Chrome wrongly assume all user coordinates in the svg to be in pixel units in that document / MIME mode, i.e. the viewbox attribute is ignored, and hence I can't work with user coordinates for the items in the svg.
This is sort of a problem for me because I'd really like to keep serving my documents as application/xhtml+xml.
Could anybody explain the reason for that weird behavior and how to get around it?
729
XML is case-sensitive. HTML is not.
The svg attribute name is viewBox, not viewbox.
73
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
