All posts tagged ‘svg’

File Under: Multimedia, Web Standards

Getting Started with Scalable Vector Graphics (SVG)

Scaling options for SVG images

Scalable Vector Graphics (SVG) have long been the ideal way to create images that need to scale without distorting. For example, SVG is a great format for an icon or logo that needs to be displayed at several sizes without pixelation or other distortion.

Unfortunately SVG’s usefulness on the web has always been curtailed by limited support in popular browsers. However, that’s changed recently with the release of Firefox 4 and Internet Explorer 9, both of which join Opera, Chrome and Safari in offering native support for SVG.

If you’d like to know more about SVG, how to use it and why you’d want to, Microsoft’s Jennifer Yu recently posted a nice overview on how to get started with SVG over at the IEBlog.

Yu covers the basic use cases for SVG, including scalable logos, selectable text within images (great for charts, infographics and the like) and dynamic graphics (for example, route lines overlayed on map tiles).

One thing you won’t get from Yu’s article is info on how to embed your SVG images in HTML. For most browsers you can simply use <img>, though for Firefox 3.6 and below, along with some other older browsers, you’ll need to use <object> (or <iframe>). It’s also now possible to write SVG inline with your HTML, though as Yu points out you’ll need to use the HTML5 doctype for that to work.

Keep in mind that if your site has a lot of traffic from older versions of IE (and that means anything prior to IE 9) you’ll need to have some sort of fallback in place. If you don’t mind involving some JavaScript in the equation, the Raphaël library allows you to easily create and work with SVG objects via JavaScript and will fallback to VML for IE 6+ and other legacy browsers.

For the record, yes, there is a certain irony in learning about SVG from Microsoft given that IE has long been the only web browser without SVG support, but don’t let that stop you from reading through an otherwise quite thorough and informative overview of SVG.

See Also:

File Under: Programming, Visual Design

Rafael Library Paints a Pretty UI Future

Rich interfaces may be easier with the new Rafaël JavaScript library. Programmer Dmitry Baranovskiy created the library to make it easy to create–and alter–vector graphics.

Using Rafaël, you can create shapes, apply rotations, and more. The library’s coolest demo has to be the image reflection:

Image reflection in Rafaël

Every bit of what is created by Rafaël is a DOM object. You can add events and create animations by modifying the objects. It’s a slick little library (only 18K compressed) that could be a foundation for doing some neat things using standardized code and no plugins.

The library uses scalable vector graphics (SVG) and Vector Markup Language (VML), so it works in all modern browser (plus IE 6!).

Check out the language reference and then see what you can create in the playground, which lets you test Raphaël JavaScript calls live.

See also: