sorted by: recent | see : popular

Content Tagged with SVG + Ajax

Sticking with SVG news.... Robert O'Callahan of Mozilla has shown SVG effects for HTML:

A while back, I announced work on applying SVG effects to HTML content. The idea is to make the SVG ‘clip-path‘, ‘mask‘ and ‘filter‘ CSS properties apply to non-SVG elements as well as SVG elements.

This work landed on trunk last week. I’ve also submitted my proposal to the SVG WG for standardization. I hope that they’ll like it; there aren’t many degrees of freedom here, for example there’s no new syntax to decide on, so there’s not much to fight over :-). And it’s good for SVG to be able to use its effects more broadly. We’ll change our implementation to match whatever the WG decides.

Unfortunately we don’t yet support external document references, so the elements describing SVG effects have to live in the same document as the elements to which they’re applied. This limits the usefulness of these effects in regular (non-XHTML) HTML for now. But we’ll fix that so that the effects can live in an external SVG file.

Check out these demos in trunk builds:

• clipPath
• mask
• filter (check out the editable goodness!)

Tom Trenka has a fantastic post on custom fonts with dojo.gfx that shows the SVG font definition implementation.

Part one of the article deals with painful, practical issues around the licensing of fonts. Tom discusses the various technical options out there, and then gets to the solution:

In general, the issues surrounding font usage have to do with the ability for someone to visit a web site, grab a specific file, and be able to reuse it without paying for a legitimate copy within any of the most commonly used programs (such as Office). Because of this concern, both the EOT and sIFR techniques work–because the fonts are embedded in a form that is not reusable in a common way.

One approach: the SVG Font Specification

Similarly, the SVG Font specification allows for the same concept—by working with a specific font definition, especially one that can be customized for the specific usage, the spec avoids most of the prickly issues surrounding licensing.

SVG fonts are relatively simple in concept; within the <defs> element, you define the main specifications of a font, and then you include specific glyph definitions. Optionally, you can include character-specific kerning information (the space between letters); some fonts include this type of hinting, and the SVG specification supports it.

Very impressive. If you are a typography wonk, then you have probably watched Helvetica: The Movie:

I recently ran across Inkscape, an open source very high-quality graphics editor that can output SVG that I'm blown away by. Even better, it runs on Linux, Windows, and Mac OS X. From the Inkscape website:

[Inkscape is] an Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.

Here's a screenshot looking at one of the samples, a vector image of a car; there are a huge number of great tools in this beastie:

Screenshot of Inkscape showing vector image of car

One of the coolest features of Inkscape is it can take a bitmap image, and do tracing of the edges to create a vector representation! Vector images are inherently more "impressionistic"; they are for more illustration type purposes. I decided to take this feature for a spin and took a photograph I have of myself and do edge detection. Here is the photograph before, loaded into Inkscape ready to process:

Inkscape with bitmap, non-vector photograph

Here are the results after playing around with the various options; on the right-hand side of the screen is the options dialog that you can use to fiddle around with the various settings for edge detection:

Screenshot of Inkscape with traced, vector representation

Now, I can save this into an SVG file suitable for the web. I could then edit the markup, or bring it onto a web-page. More on embedding SVG in a future post.

One of the strengths of SVG is that it is a file format suitable for exporting such things; while the Canvas tag is great for having a canvas that JavaScript can draw onto, you can't easily export illustrations into calls to a Canvas as you can with SVG.

It seems so obvious once you think about it, but Rob O'Callahan from Mozilla took us by surprise in his blog post demonstrating his experimental branch of Gecko that allows you to apply SVG effects to HTML.

The code for applying the effects above follows:

Rob makes a bunch of good points, such as:

CSS isn't really up to the task [of applying advanced visual effects to HTML]. One problem is that CSS isn't good at manipulating structured values like shapes and filter processing stacks; they're cumbersome to write in CSS expression syntax, or else they require new custom CSS syntax (e.g. @-rules), and there's no standard DOM to let scripts manipulate components of these structured values. Another issue is that we should try to avoid duplicating specification and implementation of complex features.

Contrast that with SVG, which long ago dealt with spec'ing out fancy-pants effects in mark-up and interfacing with JavaScript APIs. In fact, Rob ends his piece with a little snubby-snubby to Flash and Silverlight based both on SVG's status as a standard and its nice integration with page markup:

A nice side effect of providing better SVG-HTML integration is that it gives SVG a leg up on the Web. You can't do these effects using Flash or Silverlight, and since they're not standards they probably won't ever be invited to this party.

Unlike WebKit's shiny new CSS stuff, you can't just yet get a build of this stuff in Gecko:

I'm making tryserver builds right now, and I'll update this post with a link when they're ready. Here's a link to my Mercurial repository.

But it looks like builds are forthcoming. Hats off to Rob for putting together such a cool proof-of-concept.