SVG Images - Yay for Opera
Thursday, 20. November 2008, 09:07:26
The other day I discovered the magic of Inkscape, a free open-source vector graphic editor. It's really quite good, and I've been spending some time getting used to its controls, and converting some of my older vector art. In the process, I've discovered that it's easy to put SVG content into your webpages, and unless they're using Internet Explorer, your viewers can easily benefit.
While learning more about SVG, I discovered a few interesting things:
1. Despite their easily scaled nature, there doesn't seem to be any easy way to change the image size in a page. If I say width="300", the actual SVG image is still full size, but appears in a 300-pixel window. That's annoying.
2. Opera doesn't render the SVGs as nicely as Inkscape. Sure, inkscape is an advanced SVG creation utility and has features that Opera doesn't support, but Opera doesn't even render circles correctly all the time. CIRCLES. =/
3. The text in an SVG can be highlighted and copied, just like any other text in an HTML page. That's pretty cool!
4. The correct way to include an SVG image in a page is with the OBJECT tag:
<center><object data="http://nfgworld.com/grafx/games/logos/MegaDriveLogo.svg" type="image/svg+xml"><a href="http://opera.com"><img src="http://nfgworld.com/grafx/games/logos/SVG-Warning.png"></a></object></center>
The red bit is a great fallback for older browsers. If they fail to utilize the content in the
While learning more about SVG, I discovered a few interesting things:
1. Despite their easily scaled nature, there doesn't seem to be any easy way to change the image size in a page. If I say width="300", the actual SVG image is still full size, but appears in a 300-pixel window. That's annoying.
2. Opera doesn't render the SVGs as nicely as Inkscape. Sure, inkscape is an advanced SVG creation utility and has features that Opera doesn't support, but Opera doesn't even render circles correctly all the time. CIRCLES. =/
3. The text in an SVG can be highlighted and copied, just like any other text in an HTML page. That's pretty cool!
4. The correct way to include an SVG image in a page is with the OBJECT tag:
<center><object data="http://nfgworld.com/grafx/games/logos/MegaDriveLogo.svg" type="image/svg+xml"><a href="http://opera.com"><img src="http://nfgworld.com/grafx/games/logos/SVG-Warning.png"></a></object></center>
The red bit is a great fallback for older browsers. If they fail to utilize the content in the
WIDGETIZE