Introduction

This chapter describes SVG’s declarative filter effects feature set, which when combined with the 2D power of SVG can describe much of the common artwork on the Web in such a way that client-side generation and alteration can be performed easily. In addition, the ability to apply filter effects to SVG graphics elements and container elements helps to maintain the semantic structure of the document, instead of resorting to images which aside from generally being a fixed resolution tend to obscure the original semantics of the elements they replace. This is especially true for effects applied to text.

Filter effects are defined by filter elements. To apply a filter effect to a graphics element or a container element, you set the value of the filter property on the given element such that it references the filter effect.

See also

http://www.w3.org/TR/SVG11/filters.html#Introduction

Filter Element

class svgwrite.filters.Filter(start=None, size=None, resolution=None, inherit=None, **extra)

The filter element is a container element for filter primitives, and also a factory for filter primitives.

See also

http://www.w3.org/TR/SVG11/filters.html#FilterElement

Parent Classes

• svgwrite.base.BaseElement
• svgwrite.mixins.XLink
• svgwrite.mixins.Presentation

Methods

Filter.__init__(start=None, size=None, resolution=None, inherit=None, **extra)

Parameters:

• start (2-tuple) – defines the start point of the filter effects region (x, y)
• size (2-tuple) – defines the size of the filter effects region (width, height)
• resolution – takes the form 'x-pixels [y-pixels]', and indicates the width and height of the intermediate images in pixels.
• inherit – inherits properties from Filter inherit see: xlink:href

Filter.feBlend(in_, start=None, size=None, **extra)

create and add a feBlend Filter Element

Filter.feColorMatrix(in_, start=None, size=None, **extra)

create and add a feColorMatrix Filter Element

Filter.feComponentTransfer(in_, start=None, size=None, **extra)

create and add a feComponentTransfer Filter Element

Filter.feComposite(in_, start=None, size=None, **extra)

create and add a feComposite Filter Element

Filter.feConvolveMatrix(in_, start=None, size=None, **extra)

create and add a feConvolveMatrix Filter Element

Filter.feDiffuseLighting(in_, start=None, size=None, **extra)

create and add a feDiffuseLighting Filter Element

Filter.feDisplacementMap(in_, start=None, size=None, **extra)

create and add a feDisplacementMap Filter Element

Filter.feFlood(start=None, size=None, **extra)

create and add a feFlood Filter Element

Filter.feGaussianBlur(in_, start=None, size=None, **extra)

create and add a feGaussianBlur Filter Element

Filter.feImage(href, start=None, size=None, **extra)

create and add a feImage Filter Element

Filter.feMerge(start=None, size=None, **extra)

create and add a feMerge Filter Element

Filter.feMorphology(in_, start=None, size=None, **extra)

create and add a feMorphology Filter Element

Filter.feOffset(in_, start=None, size=None, **extra)

create and add a feOffset Filter Element

Filter.feSpecularLighting(in_, start=None, size=None, **extra)

create and add a feSpecularLighting Filter Element

Filter.feTile(in_, start=None, size=None, **extra)

create and add a feTile Filter Element

Filter.feTurbulence(start=None, size=None, **extra)

create and add a feTurbulence Filter Element

SVG Attributes

• filterUnits – 'userSpaceOnUse | objectBoundingBox'

  See Filter effects region.

• primitiveUnits – 'userSpaceOnUse | objectBoundingBox' Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.

  If primitiveUnits = 'userSpaceOnUse', any length values within the filter definitions represent values in the current user coordinate system in place at the time when the filter element is referenced (i.e., the user coordinate system for the element referencing the filter element via a filter property).

  If primitiveUnits = 'objectBoundingBox', then any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element (see Object bounding box units). Note that if only one number was specified in a <number-optional-number> value this number is expanded out before the primitiveUnits computation takes place.

  If attribute primitiveUnits is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.

• x – <coordinate> – start parameter

  See Filter effects region.

• y – <coordinate> – start parameter

  See Filter effects region.

• width – <lenght> – size parameter

  See Filter effects region.

• height – <lenght> – size parameter

  See Filter effects region.

• filterRes – <number-optional-number> – resolution parameter

  See Filter effects region.

• xlink:href – <iri> – inherit parameter

  A IRI reference to another filter element within the current SVG document fragment. Any attributes which are defined on the referenced filter element which are not defined on this element are inherited by this element.

Standard SVG Attributes

• Core Attributes
• Presentation Attributes
• XLink Attributes

Example

Source: https://secure.wikimedia.org/wikibooks/de/wiki/SVG/_Effekte#Urfilter_fePointLight.2C_Punktlichtquelle

import svgwrite
dwg = svgwrite.Drawing("fePointLight.svg")

filtr = dwg.defs.add(
    dwg.filter(id="DL", start=(0, 0), size=(500, 500),
               filterUnits="userSpaceOnUse"))
diffuse_lighting = filtr.feDiffuseLighting(
    start=(0, 0), size=(500, 500),
    surfaceScale=10,
    diffuseConstant=1,
    kernelUnitLength=1,
    lighting_color="#f8f")
point_light = diffuse_lighting.fePointLight( (500, 250, 250) )
point_light.add(
    dwg.animate('x',
        values=(0,100,500,100,0),
        dur='30s',
        repeatDur='indefinite'))
point_light.add(
    dwg.animate('y',
        values=(0,500,400,-100,0),
        dur='31s',
        repeatDur='indefinite'))
point_light.add(
    dwg.animate('z',
        values=(0,1000,500,-100,0),
        dur='37s',
        repeatDur='indefinite'))
dwg.save()

and the XML result (with manual reformatting):

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="100%" version="1.1" width="100%"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="DL" filterUnits="userSpaceOnUse"
          x="0" y="0" width="500" height="500" >
            <feDiffuseLighting diffuseConstant="1"
              x="0" y="0" width="500" height="500"
              in="SourceGraphic"
              kernelUnitLength="1"
              lighting-color="#f8f"
              surfaceScale="10">
                <fePointLight x="500" y="250" z="250">
                    <animate attributeName="x"
                      dur="30s"
                      repeatDur="indefinite"
                      values="0;100;500;100;0" />
                    <animate attributeName="y"
                      dur="31s"
                      repeatDur="indefinite"
                      values="0;500;400;-100;0" />
                    <animate attributeName="z"
                      dur="37s"
                      repeatDur="indefinite"
                      values="0;1000;500;-100;0" />
                </fePointLight>
            </feDiffuseLighting>
        </filter>
    </defs>
</svg>