Update: In the examples I discuss below, the tspan should be inside the textPath, not the other way around. Source files and the formatted versions are updated as of 8/31. Thanks to Holger for pointing this out.
I want to make another simple example of XSLT and SVG today. So I’m going to do another XML document and transformation. The mechanism is similar to my last example, but I’m not using any of the same SVG. Today, instead, I’m going to show an example with a textPath for making some wavy prose.
It also happens that the Mozilla team just landed support for textPath last night for Firefox trunk builds. I developed today’s example in Internet Explorer with Adobe SVG Viewer 6 preview, but I’ll be testing later with Firefox. If you want to use the latest trunk build of Firefox for testing, get it here.
By way of SVG.org, kiyut has a very extensive set of images that allow comparison of the rendering qualities of a variety of SVG viewers. Here’s the link to the smallest of the pages - there are a whole bunch of raster images to load so it takes a while.
I was thinking over the SVG lighting examples that I presented over the weekend and I wanted a clean way to produce something more complex that utilizes the lighting effect that I came up with. Examples are easiest to learn from when the information can be presented in small chunks. I think that logic carries through to code analysis. If there’s no good reason to make big long functions then I stick to what fits on my screen. That’s very developer-centric of me, but I am a developer.
So the way that I know to keep things small when it comes to XML is XSLT. That might sound backwards since XSLT and XML can be very verbose, but what I mean is that units can be independently analyzed. Large and complicated functionality can be elegantly composed from many small blocks. Chunks of code that I’ve produced with XSLT tend to be quite digestable - so far.
At the outset, we would like to stress that nothing in this letter should be construed as a criticism of Microsoft’s Internet Explorer, which is one of the leading browsers in the field. We would write the same letter if the choice was to offer support solely for Mozilla Firefox, Safari, or any other product. The failing of the proposed implementation of the preregistration system is its lack of support for standards, not its choice of software.
As a background to the Copyright Office’s decision to attempt to offer services over the Web without the use of standards, it is important to keep in mind the Web was born and achieved widespread use only because of a commitment to open, vendor-neutral standards.
How are you going to publish your game? Your article? Your website? What’s your email password? Where’s your address book? The raw photos you used to make that great picture that got so many views on flickr? What’s your password for flickr? Read the rest of “Taking stock”…
I’m going to continue from the last example I posted with the shading under the sphere. To see how I got this far, read yesterday’s post: Fake Lighting Without Filters in SVG.
Dark is the opposite of light, so as a first approximation, I’ll try just applying a gradient that’s conceptually opposite to the one I made for the light effect. The size of the shading gradient will be the same as the light, but it will be black instead of white. The focal point will also be moved; to the exact opposite side. So the (fx,fy) of (70%,15%) maps to (30%,85%). Read the rest of “Turning to the Dark Side”…
I’ve been doing some playing around with SVG effects that can be achieved without filters. I started playing because the build of Firefox (Deer Park Alpha 2) that I’m using doesn’t have them built-in. There’s work under way and a patch is available if you build from source.
There are better reasons for faking lighting though. Filters are resource intensive and sometimes you don’t care about realistic lighting so much as just a way to make something shiny (or shadowed). The comparable filter to what I’m talking about today is fePointLight.
My simple example is lighting a circle to make it look more like a sphere. I have a few goals:
I don’t want the effect to depend on the colours of the underlying shape.
I want to end up with something that works for as wide a range of shapes as possible.
I want to be able to adjust the intensity and position of my fake light at least a little bit and with out too much work.
I’ve already done some of this, so I know I’ll be at least partly successful (and it explains my mixed tense). Let’s start with a simple circle.
