After Reading About.com's Introduction to the SVG Viewbox

While I was testing SVGPan, I saw the viewBox attribute. I learnt something from the first search result after googling “svg viewbox”. It was an article introducing the SVG viewbox. There’s no difficult concepts in the guide, but I can’t understand it because of the following claim.¹

<svg width="800" height="400" viewBox="0 0 400 200">
This view box covers half the page starting in the upper right hand corner.

I have investigated into this, and I’m dubious about this idea. I’ll illustrate my doubts using two examples. Click “download” at the top right-hand corner to view the result.

My first example (viewBox1.html) download

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My First SVG</h1>
<svg width="800" height="400" viewBox="0 0 800 400">
  <rect x="0" y="0" width="400" height="200" fill="red"/>
  <rect x="400" y="0" width="400" height="200" fill="blue"/>
  <rect x="0" y="200" width="400" height="200" fill="orange"/>
  <rect x="400" y="200" width="400" height="200" fill="green"/>
  <foreignObject display="none" width="600" height="30">
  <div class="fallback">
    Sorry, your browser does not support inline SVG.
  </div>
  </foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
  <img src="/images/valid-html5.png" alt="Valid HTML 5" height="31"
  width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

“The view box covers the entire page”, as expected.

My second example (viewBox2.html) download

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My second SVG</h1>
<svg width="800" height="400" viewBox="0 0 400 200">
  <rect x="0" y="0" width="400" height="200" fill="red"/>
  <rect x="400" y="0" width="400" height="200" fill="blue"/>
  <rect x="0" y="200" width="400" height="200" fill="orange"/>
  <rect x="400" y="200" width="400" height="200" fill="green"/>
  <foreignObject display="none" width="600" height="30">
  <div class="fallback">
    Sorry, your browser does not support inline SVG.
  </div>
  </foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
  <img src="/images/valid-html5.png" alt="Valid HTML 5" height="31"
  width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

This time, the view box only covers the top left-hand corner.

In addition, I’ve found out that changing 0 0 400 200 to 400 200 0 0 doesn’t work.

Ferrara, D. n.d. Viewbox Attribute in SVG: Understanding the SVG Viewbox. Retrieved from http://webdesign.about.com/od/svg/a/svg-viewbox-attribute.htm ↩

Blog 1

Random Talk on Random Thoughts

After Reading About.com's Introduction to the SVG Viewbox

Comments