I can understand the attraction of making shapes with CSS. It's kind of like a clever puzzle, which demands extensive experience with the multitude of features available in CSS and a lot of experimentation to see what's possible. I've seen some pretty clever uses of CSS to make interesting shapes, taking advantage of features like border attributes, transforms and pseudo-elements. But I'm always torn when I look at such examples.
On the one hand, they demonstrate some serious 'geek cred', and amazing creativity. On the other hand, other than using them directly, or with minor tweaks, I can't really see myself using them, or similar techniques. It's not just that it's hard to create, in many cases it's hard to even understand how or why it works. And then trying to predict how minor tweaks might affect it is a game in itself. It's great as a mental exercise, but for day to day work it just seems maddening.
SVG on the other hand, while possibly tedious at times, is quite a bit more organized and predictable. You don't have to do clever trickes to make shapes. The basic ones, circle, square, rectangle and ellipse are extremely straighforward.
For example, suppose you wanted to create a golden rectangle:
<svg>
<rect x="10" y="10" width="161.8" height="100" fill="gold"/>
</svg>
Hey Presto, Bob's your Uncle and you're done! Or if you want a perfect circle:
<ellipse cx="50" cy="50" rx="20" ry="20" fill="none" stroke="black"/>
Now, unlike some of those CSS examples, it's pretty easy to see how this works. You wouldn't need my help to change the width of the rectangle, or to color the circle. Stretching the circle into an ellipse is pretty obvious as well. To stretch it horizontally, you would increase 'rx', or you could modify 'ry' to stretch or squash it vertically. I'm leaving out the circle tag, which is like the ellipse, but with a single attribute 'r' in place of 'rx' and 'ry'. Now, you can build a lot of things with just rectangles and ellipses, but that could get tiring after a while, which is why there are more powerful tags as well.
For example, suppose you want to draw a stereotypical image of a house, at least the kind I always drew when I was little:
<polygon points="20,100 20,50 10,50 55,20 100,50 90,50 90,100"/>
And you could add a window and a door:
<polyline points="50,100 50,80 60,80 60,100" stroke='white'/> <rect x='30' y='60' width='15' height='12' fill="white"/>
If you're having trouble picturing all this, you can check it out at JSFiddle. But so far, we're still talking child's play. It turns out, I could do all these shapes, and more, with a single svg tag, 'path'. It's less convenient, but a whole lot more flexible.
Where polyline and polygon take a series of points that define the shape, path takes a more complicated but also more powerful set of instructions, each of which may contaion both points and other parameters. I can't cover everything here, but I can give you a taste. To recreate the house above, you could use the L command, which draws a straight line in absolute coordinates:
<path d="M20,100 L20,50 10,50 55,20 100,50 90,50 90,100 z" />
There are only a few differences between this and the polygon above. First, with path one typically needs to describe the starting point with the "Move-to" command, M, thus 'M 20,100' places the virtual pen on that starting point. Then the "Line-to" command takes over drawing the complete shape. Finally the 'z' command signifies closing the curve by connecting to the starting point, though it's not strictly necessary in our case as we're not really using the stroke of the curve, just the fill.
Now if you're anything like me, you've always wanted to live in a geodesic dome. I haven't managed that, but I'd settle for a curved roof:
<path d="M20,100 L20,50 10,50 C10,10 100,10 100,50 L90,50 90,100 z" />
Here we're using the Curve-to command, 'C' to go from one side of the house to the other, but there are a couple of Control Points first to describe the shape of the Cubic Bezier curve followed by the destination point coordinates.
Now, paths are just a small part of what you can do with SVG, and there's a lot more to paths than what I can describe here right now, but I do want to include a couple more tips. One, you'll notice that I've paired the coordinates with commas and used spaces to separate those pairs. It turns out that is totally arbitrary. Commas and spaces are interchangeable SVG paths, so you can organize them as you see fit. A long string of numbers without this kind of differentiation is pretty hard to follow. Also, I've been using capital letters for the commands (M, L, C & c). This indicates the use of Absolute coordinates, i.e. L10,0 draws a line from where you are tocoordinates 10,15. You can use lower case letters (m, l, c &c.) to specify relative coordinates, i.e. l10,0 would draw a line from wherever you are to the right by 10 units. Finally, once you start using a particular commond, say L or C, it will keep using that command until it sees a new one, thus L followed by a series of points is essentially like using polyline.
That's all for now, but checkout some of these links if you're interested in more details:
图标图像:
