þÿ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-16be-with-bom"> <title>SVG in CSS background test</title> </head> <style type="text/css"> body { font-family: sans-serif; font-size: 0.8em; } div div { background-color: #EEE; } h1 { font-size: 1.3em; text-decoration: underline; } h2 { font-size: 1em; } .hasdims { width: 100px; height: 100px; } .haspercdims { width: 50%; height: 50%; } .svgdims { background-image: url(hasdims.svg?css=y); } .svgvbox { background-image: url(hasvbox.svg?css=y); } .svgpercs { background-image: url(haspercs.svg?css=y); } .bigbox { width: 150px; height: 150px; } .smallbox { width: 50px; height: 50px; } </style> <body> <p>Related blog post: <a href="http://a.deveria.com/?p=76">SVG test page</a></p> <h1>SVG as object tests:</h1> <div id="object-tests"> <h2>SVG has width&amp;height set, object has width&amp;height set:</h2> <object data="hasdims.svg?obj=y" type="image/svg+xml" height="100" width="100"> Not supported </object> <h2>SVG has width&amp;height set, object does not:</h2> <object data="hasdims.svg?obj=y" type="image/svg+xml"> Not supported </object> <h2>SVG uses viewBox, object has width&amp;height set:</h2> <object data="hasvbox.svg?obj=y" type="image/svg+xml" width="100" height="100"> Not supported </object> <h2>SVG uses viewBox, object has no width&amp;height set:</h2> <object data="hasvbox.svg?obj=y" type="image/svg+xml"> Not supported </object> </div> <h1>SVG as HTML image tests:</h1> <div id="image-tests"> <h2>SVG has width&amp;height set, img has width&amp;height set:</h2> <img src="hasdims.svg?img=y" width="100" height="100"> <h2>SVG has width&amp;height set, img does not:</h2> <img src="hasdims.svg?img=y"> <h2>SVG uses viewBox, img has width&amp;height set:</h2> <img src="hasvbox.svg?img=y" width="100" height="100"> <h2>SVG uses viewBox, img has no width&amp;height set:</h2> <img src="hasvbox.svg?img=y"> </div> <h1>SVG as CSS background tests:</h1> <div id="css-tests"> <h2>SVG has width&amp;height set, div has width&amp;height set:</h2> <div class="hasdims svgdims"> text text text text text text text </div> <h2>Same as above, with box smaller than image:</h2> <div class="hasdims svgdims smallbox"> text text text text text text text </div> <h2>Same as above, with box larger than image:</h2> <div class="hasdims svgdims bigbox"> text text text text text text text </div> <h2>SVG has width&amp;height set (50% square), div has width&amp;height set:</h2> <div class="hasdims svgpercs"> text text text text text text text </div> <h2>SVG has width&amp;height set, normal div:</h2> <div class="svgdims"> text text text text text text text </div> <h2>SVG has width&amp;height set, div has width&amp;height set as 50%:</h2> <div class="haspercdims svgdims"> text text text text text text text </div> <h2>SVG uses viewBox, div has width&amp;height set:</h2> <div class="hasdims svgvbox"> text text text text text text text </div> <h2>SVG uses viewBox, normal div:</h2> <div class="svgvbox"> text text text text text text text </div> <h2>SVG uses viewBox, div has width&amp;height set as 50%:</h2> <div class="haspercdims svgvbox"> text text text text text text text </div> </div> </body> </html>