Scalable Vector Graphics (SVG), Page 3

Filter Effects

 Images may have filter effects such as blurring and lighting effects.

Filter effects are defined within a filter element within a defs element. You define a region that the filter will be applicable to with the x, y, height and width attributes such as x="-10" y="-10" width="200" height="200". These four attributes can represent the filter positioning and dimensions according to the global coordinate system of the whole SVG image with the filterUnits="userSpaceOnUse" attribute. But by default they represent the local coordinate system from the outline of the filter region or bounding box which can be specified with filterUnits="objectBoundingBox" attribute.

The primativeUnits attribute is the same as the filterUnits attribute but for any of the x, y, width and height attributes on the actual filter effects themselves, the elements with names beginning with fe. For the primativeUnits attribute the userSpaceOnUse value is the default.

Also the use of the filterRes attribute provides the resolution for the filter effect such as dots per inch (dpi) for printed media. The value can be one number representing both x and y axis or two numbers, first for the x axis and second is for the y.

 The background canvas of the SVG image and / or a graphics container can be enabled and stored in a buffer by the enable-background attribute / SVG CSS property. Its value is accumulate by default which acts like the CSS inherit value. Otherwise the value is new which creates a new transparent black canvas.

 A set of common attributes can be used by the actual filter elements starting with fe (filter effect). These common attributes include the x, y, width and height attributes to state subregions for specific fe based elements.

The result attribute which stores a filter like a variable and the in attribute takes a value of a previous fe based result. Instead, the in attribute could have:

• SourceGraphic which uses the original graphics component that the filter is being applied to.
• SourceAlpha is like SourceGraphic but the graphics component is a 'black object' or photo-negative.
• BackgroundImage access's the background canvas of the document or graphics component.
• BackgroundAlpha access's the transparent area of the background canvas of the document or graphics component.
• FillPaint takes the colour of the graphics component's fill.
• StrokePaint takes the colour of the graphics component's stroke.

To offset a graphics component or supplemental graphics component use the feOffset element within the filter element. The dx and dy attributes specify the offset with a number value each. For dx, negative numbers offset to the left, otherwise to the right. For dy, negative numbers offset above, otherwise below the original position.

Blurring may be applied using the feGaussianBlur element with the stdDeviation attribute providing the number of units for the blur.

 After the filter effects have been defined you apply them by using a filter attribute on the graphics component or group. The value of the fillter attribute has the url() function and the 'hash fragment reference' pointing to the filter with the same id or xml:id attribute value.

<defs>
  <filter id="shadowing" x="0" y="0" filterRes="100">
    <feGaussianBlur stdDeviation="5"/>
    <feOffset dx="-3" dy="3"/>
  </filter>
</defs>

<!-- ... -->

<circle cx="150" cy="150" r="10" fill="#000000" stroke="none" filter="url(#shadowing)"/>
<circle cx="150" cy="150" r="10" fill="#0000ff" stroke="none"/>

 

 The feFlood filter applies a rectangular area in the colour stated by the flood-color attribute with the transparency stated by the flood-opacity attribute. This will visually replace the graphics component with similar to a filled, non-outlined rectangle.

 Images such as JPEGs and PNGs as well as SVG graphics components can be used as image filter effects by using the feImage element and the xlink:href attribute. This will also by default replace the original graphics component.

 Tiling effects are handled just by the presence of the feTile element, no attributes.

 Graphics components and / or filter layers can be blended with the feBlend filter using the common filter in attribute and its own in2 attribute stating the image layer snapshots that are to be blended. How they are to be blended is handled by the mode attribute with normal, multiply, screen, darken or lighten form of blends.

 Sometimes you may need to create multiple fe elements to create your desired effect. You can implement similar to a 'flatten layers' command using an feMerge element and two or more feMergeNode elements, each with an in attribute specifying the result of several fe based elements to merge.

 The feComposite filter element allows you to composite two graphics components or filter layers using the in and in2 attributes to refer to those objects.

It uses the Potter-Duff composite algorithm with the operator attribute. You can composite one object over the other; one in the other (only the overlapping part is rendered), out, atop and xor.

The arithmetic value requires the use of the k1, k2, k3 and k4 attributes providing dissolves for some lighting effects.

 

 Lighting effects can be applied using the feSpecularLighting or feDiffuseLighting elements and an fe light source based element as the child element. The colour of the light is specified by the lighting-color attribute. Shininess is handled by the specularExponent attribute with a number from 1.0 to 128.0.

 Pointing a virtual light on the graphics component can be done with the fePointLight filter element. The x, y and z attributes state the 3 dimensional location of the virtual light. If the z attribute's value is a positive number then it represents more towards the person viewing the SVG image, negative is further away.

 Another lighting effect is the feDistantLight that applies the distant lighting via the azimuth and elevation attributes stating the angle in degrees in the XY and YZ directions, respectfully.

 You can put a spotlight on your image with the feSpotLight filter with x, y and z attributes specifying the 3 dimensional location of the light source. Also the pointsAtX, pointsAtY and pointsAtZ attributes specify the 3 dimensional location of what the spotlight is pointing at.

With the specularExponent attribute you can control the focus of the light source with an exponent number and the limitedConeAngle attribute limits the area of which the spotlight shines on.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <filter id="pointLight" x="0" y="0" filterRes="100">
      <feGaussianBlur stdDeviation="5" in="SourceAlpha" result="blur"/>
      <feSpecularLighting specularExponent="20" lighting-color="#0000ff" in="blur" result="light">
        <fePointLight x="255" y="5" z="200"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="light" operator="in"/>
    </filter>
  </defs>
  
  <g id="main">
    <circle cx="170" cy="220" r="20" fill="#00ff00" stroke="none"/>
    <rect x="20" y="120" width="100" height="100" stroke="black" stroke-width="2" fill="red"/>
    <circle cx="150" cy="200" r="20" fill="#00ff00" stroke="none" filter="url(#pointLight)"/>
    <rect x="10" y="100" width="100" height="100" stroke="black" stroke-width="2" fill="red" filter="url(#pointLight)"/>
  </g>
</svg>

 

 The feColorMatrix element allows transformations on colours. Its values attribute depends on its type attribute.

When type is set as matrix: the values attribute has 20 numbers each separated with a space and / or a comma. Set to saturate, it is a single 0 to 9 number. With the hueRotate value it is an angle in degrees. The values attribute is not needed for the luminanceToAlpha value of the type attribute.

 Transfer functions for the red, green, blue and the alpha components of a graphics component is handled by the feComponentTransfer element with the four optional feFuncR, feFuncG, feFuncB and feFuncA child elements in order representing red, green, blue and alpha respectfully.

The type attribute determines the component transfer type and which of the other attributes are needed.

• Type value identity: no other attributes needed.
• Type value table: uses the tableValues attribute for interpolation values.
• Type value discrete: also uses the tableValues attribute but for step values.
• Type value linear: uses the slope and intercept attributes.
• Type value gamma: uses the amplitude, exponent and offset attributes.

The tableValues attribute has a space and / or comma separated list of numbers. A single number is the value of the other attributes.

 Merging neighbouring pixels with the current image pixels is done using the feConvolveMatrix filter effect. Ordering of the matrix pixels with an x number and an optional y number in an order attribute.

The convolution matrix is specified by a list of numbers in the kernalMatrix attribute. Then the matrix is divided by the number from the divisor attribute and a bias number is applied from the bias attribute.

Positioning within the matrix is handled by the targetX and targetY attributes. Each are to be within the range of zero and the x and y respectively with the order attribute value.

For the edgeMode attribute you can specify the extension of the graphics component by duplicating the border colour pixels with the value duplicate; or extending by adding the opposite border colour pixels with the wrap value or extend with zero r,g,b and a with the value none.

The length of each matrix cell or unit is provided by the kernalUnitLength with an x number and an optional y number.

If you want the alpha channel to be effected you can specify true for the preserveAlpha attribute.

 Filter element feDisplacementMap displaces the colour channel of the graphics component specified from the in attribute with the pixels of the graphics component specified from the in2 attribute with a scale factor from the scale attribute. The colour channels to displace in the x axis and y axis are specified by the xChannelSelector and yChannelSelector respectively.

 To thicken or thin graphics components can be done with the feMorphology filter. Specifying the component to be thicker with the operator attribute and the value dilate or thinner with the value erode. How thick or thin is specified by the radius attribute with an x number and an optional y number.

 Turbulence effects can be applied with the feTurbulence filter element and its type attribute specifies if it is a turbulent effect ( type="turbulence" ) or noise ( type="fractalNoise" ).

The baseFrequency attribute takes an x, optional y numbers and the numOctaves attribute takes an integer both for the noise effect. The random generator is seeded by the number from the seed attribute. To have smooth tiling of the turbulence you have the stitch value of the stitchTiles attribute otherwise use the value noStitch.

Extended Styling

 CSS styling could be within a style element as an in-document StyleSheet with typically the type="text/css" attribute. A CDATA Section is also advisable for the style element's contents. Before SVG 1.2, you had to have the xml:space="preserve" attribute too. Also a style attribute could be used as a global attribute providing inline CSS properties for the element that the attribute is on.

<style type="text/css" xml:space="preserve"><![CDATA[
  rect {
    fill: red;
    stroke: blue;
    stroke-width: 2px;
    fill-opacity: 0.7;
  }
]]></style>

Extended Colour

 SVG User Agents that have enough resource support to handle greater colour management can support the rest of the 'SVG Colour Keywords'.

 An ICC Colour Profile can be specified by the color-profile element with the name attribute as the label to use within the document and the xlink:href attribute referring to the colour profile.

Then where you specify a colour you have a typical colour as the fallback followed by the icc-color() function. This icc-color() function has a comma separated list of values with the first as the label defined in the color-profile element's name attribute and the rest are optional ICC colour values.

 If CSS is supported then you could use the @color-profile At Rule with the name property, like color-profile element's name attribute, and the src property, like color-profile element's xlink:href attribute.

Extended Text

 Aligning text can be handled with the text-anchor attribute. With the value start will state the text to be aligned leftwards in left-to-right text, top-to-bottom paragraphs or aligned rightwards in right-to-left text, top-to-bottom paragraphs. It would align vertically upwards for top-to-bottom text, right-to-left paragraphs.

A value of end will align to the right, left or downwards respectfully and the value middle would center the text.

 Text can be displayed following a path. You define a path in defs and have the text within a textPath element with an xlink:href attribute referring to the path element. The textPath element works best within the text or textArea or tspan elements.

To make the spacing between the characters of the text automatic you use the spacing attribute with the value auto. By default it is exact. Text can be stretched along the path with method="stretch" attribute. The text can start away from the start of the path via the startOffset attribute taking a number with any of the typical unit types. If it is a percentage then the text starts from that percentage of the whole path length.

Clipping and Masks

 The clipPath element within the defs element takes any graphics component, text and container elements including rect, circle, path, text and g within the clipPath element. The clip is applied with the clip-path attribute just like the filter attribute.

The object that you apply the clip to is made completely transparent apart from the shape applied by the clip or changes the shape of the object to the shape in the clip but keeps the fill and other properties as the original object.

 You can use the mask element similar to the clipPath element and apply with the mask attribute. The object that you apply the mask to is also made completely transparent or changed to the shape in the mask but the shape in the mask is made almost transparent like a watermark or stained-glass.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="400" height="400" viewBox="0 0 400 400">
  <title>Clip and Mask</title>
  
  <defs>
    <clipPath id="clip">
      <circle cx="100" cy="100" r="10" fill="blue" stroke="none"/>
    </clipPath>
    <mask id="mask">
      <circle cx="100" cy="200" r="10" fill="blue" stroke="none"/>
    </mask>
  </defs>
  
  <g id="main">
    <text x="15" y="100" font-family="Verdana, serif" font-size="16" fill="blue" stroke="blue">
      This is an SVG Clipping test.
    </text>
    <rect x="5" y="10" width="200" height="200" fill="red" stroke="none" clip-path="url(#clip)"/>
    
    <text x="15" y="200" font-family="Verdana, serif" font-size="16" fill="blue" stroke="blue">
      This is an SVG Mask test.
    </text>
    <rect x="5" y="110" width="200" height="200" fill="red" stroke="none" mask="url(#mask)"/>
  </g>
</svg>

Patterns

 Patterns can be made using the pattern element in a defs element. Any graphics component, text and container based element is used within the pattern element. You define the region with the x, y, width and height attributes.

An xlink:href attribute can reference a predefined pattern to use within this pattern. Transforms can also be applied to the pattern using the patternTransform attribute. For the patternUnits and patternContentUnits attributes as with all unit based attributes have the values userSpaceOnUse or objectBoundingBox specifies if the x, y, width and height are calculated with the global coordinate system of the SVG image or relative to the object that the pattern is being applied to.

Markers

 Markers provide a way of designing arrowheads for lines, paths, polygons and polylines. In the defs element you have one or more marker elements with an id or xml:id. The markerUnits attribute has the value userSpaceOnUse as other unit based attributes but instead of the usual objectBoundingBox value it has the strokeWidth value making the viewBox, refX, refY, markerWidth and markerHeight relative to the line itself.

Orientation of the arrowhead can be done with the orient attribute with either the auto keyword or an angle number.

You apply the marker with any of these attributes:

• marker-start applies the arrowhead at the start of the line, path, polyline or polygon.
• marker-end applies the arrowhead to the end of the line based shape.
• marker-mid applies the arrowhead to every line joint within line based shapes.
• marker is a shorthand that can take a space separated list of the three individual versions -start, -mid and -end.

Views

 You can refer to an SVG image with extra view information including viewbox, transformations and preserve aspect ratios with the svgView() function in the hash part of the URI or IRI of the SVG image.

Within the svgView() function you have any of these five inner functions: preserveAspectRatio(), viewBox(), transform(), zoomAndPan() and viewTarget() with the same values as their attribute versions.

Image.svg#svgView(viewBox(35 10 150 200) transform(scale(.5) rotate(-6)))

 The view element allows you to declaratively predefine an SVG View. Then you can refer to the view element's id or xml:id attribute with either the basic hash part of the URI or IRI or with the id() function in an xpointer() function within the hash part of the URI or IRI if the User Agent supports xpointers.

Image.svg#thisView
Image.svg#xpointer(id(thisView))

Cursors

 You can define platform independent graphical pointing components such as a mouse pointer with the cursor element. The x and y attributes specify the 'hot spot' as numbers that represents the part of the graphical component that is aimed over other components for hover effects or activating hyperlinks. To reference the actual pointing graphical component that is to be the cursor you use the xlink:href attribute. This cursor needs to be of a format that supports transparencies such as PNG raster images.

 Alternatively you can specify them or specific built-in cursors with the cursor attribute or CSS property. The value is either a single url() function or a comma separated list of url() functions.

Extended Fonts

 You can use CSS's @font-face At rule to refer to locally installed fonts, remote fonts with formats.

More elements and attributes are available for more complex or extended definition of fonts. Such as the font-face element has extra attributes concerning the vertical forms of ideographic (as v-ideographic), alphabetic (as v-alphabetic), mathematical (as v-mathematical) and hanging (as v-hanging).

The glyph and missing-glyph elements content models can also be extended to have general SVG shapes, paths, text and other graphical components.

 Like the hkern element, the vkern element allows some pairs of characters to be rendered more closer to each other in a vertically orientated line of text. The attributes are the same as the hkern element. Glyphs to be kerned should have the same font family, size, style and weight.

 Within a font-face-uri element you can specify the format of the font face with the font-face-format element. The string attribute usually has the value svg but can be anything such as truetype or opentype if the font-face-uri refers to a .ttf or .otf font file. It could be the value woff if it refers to a .woff (Web Open Font Format).

 Within a font-face-src element you can refer to a locally installed font with the font-face-name element. Its name attribute specifies the name of the installed font.

Epilogue

This article is not exhaustive. For more on Scalable Vector Graphics (SVG) visit http://www.w3.org/standards/techs/svg.