My OperaSVG is awesome, but not the tools
Tuesday, February 14, 2012 11:05:00 AM
I've been working on a WebGL tutorial movie on my spare time and I wanted to make a slide to show some bits of the OpenGL timeline that are relevant for WebGL. I tried a few options, but ended up doing it in SVG. Both diagram and background. Personally I still think the tools out there are a bit awkward to use. My normal work flow is quickly hashing it out in svg-edit then grabbing the source and hand editing it until it's the way I want it. Check out the background svg... soopah neat. That's so much nicer than slapping a jpeg in the background. 1,078 bytes uncompressed.
<?xml version="1.0"?>
<svg viewBox="0 0 2880 1800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<style>
circle {
fill: black;
stroke-width: 1;
stroke: #111;
}
</style>
<pattern id="pat" patternUnits="userSpaceOnUse" viewBox="0 0 16 16" width="27" height="27">
<circle cx="8" cy="8" r="4"/>
<circle cx="16" cy="16" r="4"/>
<circle cx="0" cy="0" r="4"/>
<circle cx="0" cy="16" r="4"/>
<circle cx="16" cy="0" r="4"/>
</pattern>
<radialGradient id="grad" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-40) translate(0, 1700) scale(2,1)" cx="0" cy="0" r="1000" fx="0" fy="0">
<stop offset="0%" stop-color="#555"/>
<stop offset="20%" stop-color="#444"/>
<stop offset="40%" stop-color="#333"/>
<stop offset="100%" stop-color="#111"/>
</radialGradient>
</defs>
<rect fill="url(#grad)" x="0" y="0" width="2880" height="1800"/>
<rect fill="url(#pat)" x="0" y="0" width="2880" height="1800"/>
</svg>
The actual slide is an html with an inlined svg. Another 2,165 bytes making the whole slide land somewhere just over the 3k mark.
<!doctype html>
<html>
<style>
html,body,svg {
width: 100%;
height: 100%;
}
svg {
display: block;
}
body {
margin: 0px;
background-image: url("background-industrial.svg");
background-size: cover;
}
circle,path {
stroke: white;
stroke-width: 5;
fill-opacity: 0;
}
text {
fill: white;
stroke-width: 0;
font-size: 80px;
font-family: tahoma;
}
</style>
<body>
<svg viewBox="0 -400 3050 200" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<title>OpenGL timeline</title>
<text x="1000" y="-800" style="font-size:150px">OpenGL timeline</text>
<g>
<title>Developed by SGI, direct mode, fixed function pipeline.</title>
<circle r="10" cx="300"/>
<text x="200" y="100">1992</text>
<text transform="translate(350,-50) rotate(-60)" >OpenGL 1.0</text>
</g>
<g>
<title>Successive improvements like multitexturing, cubemaps, VBO.</title>
<circle r="10" cx="500" style="stroke:gray"/>
<text style="fill:gray" transform="translate(550,-50) rotate(-60)" >OpenGL 1.X</text>
</g>
<g>
<title>Programmable pipeline, GLSL</title>
<circle r="10" cx="1000"/>
<text x="900" y="100">2004</text>
<text transform="translate(1050,-50) rotate(-60)" >OpenGL 2.0</text>
</g>
<g>
<title>Programmable pipeline, OpenGL ES SL</title>
<circle r="10" cx="1600"/>
<text x="1500" y="100">2007</text>
<text transform="translate(1650,-50) rotate(-60)" >OpenGL ES 2.0</text>
</g>
<g>
<title>Direct mode and fixed function dropped</title>
<circle r="10" cx="2000" style="stroke:gray"/>
<text x="1900" y="100" style="fill:gray">2009</text>
<text style="fill:gray" transform="translate(2050,-50) rotate(-60)" >OpenGL 3.1</text>
</g>
<g>
<title>OpenGL ES 2.0 for the web</title>
<circle r="10" cx="2400"/>
<text x="2300" y="100">2011</text>
<text transform="translate(2450,-50) rotate(-60)" >WebGL 1.0</text>
</g>
<path d="m50,0 l600,0 l50,50 l50,-100 l50,50 L2850,0 M2950,0 l-100,25 l0,-50 l100,25" />
</svg>
</body>
</html>
I'm no html/svg-wizkid so I'm sure there are a couple of improvements that could be made, like removing the preserveAspectRatio=none which is hiding a bug in 11.60, and removing the overflow:hidden which is the typical sweep-under-the-carpet-fix and really figure out why I get a v-scrollbar, but all in all I always get struck by how elegant and simple it gets when you do some svg stuff. It's a shame it's lacking in the tools area or I think it would be used so much more!
EDIT: So @erikdahlstrom (co-chair of W3C SVG WG and fellow Opera-gfx) came to the rescue on my scrollbar carpet sweeping note. As it turns out the svg element is an inline element and that in some way which is clearly beyond my box model skills causes a few extra pixels to be added to the body element. The solution is to either set the line-height to 0 for the body element or to do what I did which I think is the neater option:
svg {
display: block;
}
