Archive for the ‘SVG’ Category

transform-origin for SVG elements

Firefox has supported transform-origin on html elements since version 16 (even earlier if you count -moz-transform-origin), but it’s been a bit hit and miss using it on SVG elements.

Percentage units on SVG elements did not work at all, neither did center of course since that’s just an alias for 50%.

Fortunately that’s all about to change. Firefox 41 and 42 have a new pref svg.transform-origin.enabled that you can use to enable transform-origin support for SVG elements. Even better, Firefox 43 will not require a pref at all, it will support transform-origin straight out of the box.

Restrictions on SVG used as an image

SVG images are uncommon compared to png, gif and jpeg so when we implemented support for them we wanted to keep to the mental model that people have for raster images.

If SVG images work just like raster images then websites that support raster image upload can allow SVG images to be uploaded too without having to worry about implementing additional security or privacy checks.

So let’s see what we expect from raster images:

  • Comprise a single file
  • Are not interactive i.e. for example they can’t react to you moving the mouse over them
  • Should display pretty much the same independent of the operating system you’re running
  • Cannot change to display something else depending on the time they are viewed
  • Behave like a raster image to the containing document i.e. they don’t have a DOM
  • Cannot have areas that work as hyperlinks
  • Will not render differently depending on whether particular sites have been visited
  • Cannot send or receive data
  • But they can be animated

If we omitted one of these restrictions, allowing hyperlinks to be displayed in visited colours for example, copying the image to canvas via drawImage would then allow a web page to determine whether another site had been visited by the user unless we made the canvas write-only. As we don’t make the canvas write-only when a raster image is copied to it, we don’t want to make it write-only when an SVG image is copied to it either.

So if you’re going to use SVG as a background-image, border-image or via a html <img> or SVG <image> element and your image needs to do something that a raster image could not do then it’s unlikely that will work for you. Having the image on the same domain as the host document won’t make any difference.

Some workarounds for common problems:

  • If you want to use a stylesheet, you can encode the stylesheet contents as a data URI in the image file
  • If you want your SVG image to contain other images then you can encode the embedded images as data URIs
  • While hyperlinks in images are disabled, you can make the whole image a hyperlink by wrapping a hyperlink tag round the image element itself in the container document
  • If you need anything that images don’t offer then perhaps you should be considering putting the SVG inline in the document or using an <iframe> or <object> tag instead

SVG Fragment Identifiers

An SVG feature appearing for the first time in Firefox 15 is support for SVG Fragment Identifier linking. This feature allows authors to display different parts of an SVG image by specifying a different fragment identifier on the end of the URL.

The Firefox 15 implementation also includes support for the view element which is basically a predefined fragment identifier. It does not however, support XPointer style fragment identifiers.

One use case for fragment identifers could be an SVG document with a set of sprites arranged in a grid. Fragment identifiers could then be used to display one or more of those images on another html or svg page.

Here’s an example that shows Fragment Identifier Linking in action

SVGTests interface implemented

Support for the SVGTests interface has just landed in Firefox. It’s currently available in Nightlies and all being well, should make its release appearance in Firefox 12.

The SVGTests interface allows scripts to check whether additional functionality is supported by a browser. There’s no strict definition of what extensions mean but Firefox currently uses element.hasExtension(“http://www.w3.org/1999/xhtml&#8221;) to suggest that foreignObject elements support html content and element.hasExtension(“http://www.w3.org/1998/Math/MathML&#8221;) to suggest they also display mathML.

The SVGTests interface also allows the requiredFeatures, requiredExtensions and systemLanguage attributes to be manipulated as if they were arrays using the SVG DOM.

SVG Masks are changing their default colour space

According to the original SVG 1.1 specification masks in SVG always operated in the linear RGB colour space. That meant that Firefox always converted the graphic being masked to linear RGB and after that, applied the mask.

SVG 1.1 2nd edition changes the way masks work and a patch has landed for Firefox 10 to match that change. SVG masks now honour the color-interpolation property. This means that authors can choose whether the graphic is converted to linear RGB before the mask is applied.

The thing to watch out for though is that the default value for color-interpolation is sRGB so existing content may render slightly differently. If you want things to stay the same you need to add color-interpolation=”linearRGB” as an attribute of the mask element.

Opera has worked like this for some time now and a patch make this change also landed in Webkit recently so Chrome and Safari will render things this way at some point too.

SVG is on all the time now in Firefox

In versions of Firefox prior to 4.0 there was an svg.enabled flag that you could set to false in about:config to disable Firefox’s SVG capability.

During the development of Firefox 4, UI changes took more and more advantage of SVG; for buttons for instance you can ship with fewer bitmaps – one scalable drawing can replace all the bitmaps for different screen resolutions and using SVG filters you can even derive the greyscale disabled state from the enabled button.

Eventually we discovered that the Firefox 4 UI had become so internally dependent on SVG that it would not start any more when you set svg.enabled to false so we removed the flagfootgun. SVG is now a first class citizen just like html.

One consequence of this is that if you were using an SVG plugin such as the Adobe or Corel SVG viewers these will no longer function. To ease the pain, we have implemented more of the SVG specification in Firefox 4 than ever before and as you can see we’re up to a similar score to the Adobe plugin. There are still some things that the Adobe plugin does that Firefox does not, such as SVG fonts there are now things that Firefox does or does correctly that may in some way make up for that.

SVG cursors

Daniel Holbert wrote a while ago in svg-as-image that you can use SVG in many new places in Firefox 4. Did you realise that that means that you can use SVG for cursors too?

For an SVG cursor it’s as simple as:

cursor: url(cursor1.svg) , auto;

Browsers that don’t understand SVG cursors should fall back to the non-URL value.

One caveat is that the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. The usual SVG as an image restrictions apply but animation will work so spectacular things should be possible.

For more information see the newly updated MDN article: Using_URL_values_for_the_cursor_property

SVG News

In my previous post (SVG Glyph Positioning) I said that we now do individual glyph positioning for SVG text but that there were some gotchas.

Fortunately Takeshi Kurosawa stepped up to the plate and fixed inheritance of glyph positions so that <text x=”10 30″ y=”30″><tspan>HI</tspan></text> now displays correctly. His work on this will be in Beta 7.

We’ve made more animation progress too. Animated slideshows anyone?

  • Event based animation by Brian Birtles allows animation to react to mouse clicks: Eventbase targets
  • Then we have string animation which would allow the animation to change the slideshow image to move to the next slide.
  • At the moment the slides would need to be based around SVG use elements however the ability to have slides as SVG images where each slide is an SVG document is not far off thanks to Daniel Holbert.

I think eventbase animation was early enough to be in Beta 6, String animation will be in Beta 8 and so should SVG images in the SVG image tag.

Meanwhile Jonathan Watt has been keeping his head down implementing a rather complicated patch for animation of path segments. Once that lands only lists of numbers e.g. text glyph rotation and polygon and polyline points will be left. Pretty much anything else should animate barring the odd and hopefully minor rough edge of course.

SVG Glyph Positioning

The Firefox trunk now has the ability to position individual text glyphs in SVG. That means that full-text-text-07-t.html mostly works, barring some glyph rotation issues on some platforms. If you see the glyphs unrotated on your platform, select the SVG frame and view it in its own tab which will force a different font size to be used.

Ken Stacey originally worked on this and almost had it in the tree at the end of 2007 so it’s been a long last 5 yards for this feature.

If you are trying to position individual glyphs you still need to ensure that the glyph positions are defined directly against the text or tspan element they are to affect as inheritance of glyph position data is still to be implemented.

For example <text><tspan x=”10 30″ y=”30″>HI</tspan></text> is fine whereas <text x=”10 30″ y=”30″><tspan>HI</tspan></text> doesn’t work yet.

Well done Microsoft for joining the SVG party

Microsoft announced that IE9 will support a subset of SVG. They’ve even done a video about it: IE9 SVG Video

The IE9 developer preview already manages to pass just over 28% of the SVG test suite according to codedread’s SVG support table

So congratulations are in order for joining in and getting going. There’s more to come to according to this as markers, clipping and masking are all things to look forward to.