F2F/Sydney 2013/Agenda/border brushes

From SVG
< F2F‎ | Sydney 2013‎ | Agenda

Introduction

CSS Backgrounds and borders defines a way to create a scale 9 image: http://www.w3.org/TR/css3-background/#border-images I propose to extend this feature to SVG, but instead of slicing an image, we would define a new tag <brush>.

This brush can be set as the color of the stroke. The stroke width would affect the scaling of the brush element.

Examples of border brushes in Illustrator

A simple google search for border image

Example how the sides start to tile when resizing the path
Example how the sides start to tile when resizing the path

Example how the sides start to tile when resizing the path]

Example how the stroke width affects the border
Example how the stroke width affects the border

Example how the stroke width affects the borde

Example how dashing affects the tiling
Example how dashing affects the tiling

Example how dashing affects the tiling

Example how tiling is used on different shapes
Example how tiling is used on different shapes

Example how tiling is used on different shapes

proposed markup

example:

  <brush id="mybrush">
        <corner bbox="...">
         ...
     </corner>
     <side bbox="...">
     ...
     </side>

corner and side can contain any path data but can only solid colors. This is because if will be too hard to deform images and gradients along a path,