W3C home > Mailing lists > Public > www-style@w3.org > May 2009

[css3-background] SVG in border-image / background-image

From: Erik Dahlström <ed@opera.com>
Date: Tue, 26 May 2009 14:55:08 +0200
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <op.uujfh6cngqiacl@gnorps.linkoping.osa>
Hi www-style,

when a 'border-image' property[1] references an SVG image, how should the border parts be rendered?

Doing a rasterization followed by e.g stretching when there's vector data available seems like a suboptimal solution.

After having looked at the various scenarios, both where the SVG has a viewBox attribute and when it doesn't, the idea of splitting the viewBox rectangle using the cuts defined in CSS would seem the most logical and useful one. To be intuitive and easy to use that would imply that @preserveAspectRatio in the SVG must be ignored[2]. For the case where there's no @viewBox the behaviour could be defined to be as if there was a viewBox with value "0 0 width height", where the width and height are absolute values from the svg root element (and in case they need to be resolved, e.g percentage values, they are resolved using the size of the split border-image destination area).

Please define the processing for the SVG-in-border-image case.

Also please consider defining something similar for when 'background-image' references an SVG that lacks a @viewBox. Opera currently treats it as if there was a viewBox with value "0 0 width height", where the width and height are absolute values from the svg root element (and in case they need to be resolved, e.g percentage values, they are resolved using the size of the background-image destination area). This makes the svg case more similar to the raster image case, and also makes it easier to reuse clip-art from svg graphic editors that don't add a @viewBox (rather common). Note however that @preserveAspectRatio is respected for 'background-image'.

Cheers
/Erik

[1] http://www.w3.org/TR/css3-background/#the-border-image
[2] If the aspect is preserved then the border-images will often not fill the allocated area, and if preserveAspectRatio="none" is specified, then the image will most often be distorted.

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed
Received on Tuesday, 26 May 2009 12:55:57 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:18 GMT