Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013
-
Upload
michael-mullany -
Category
Technology
-
view
108 -
download
2
description
Transcript of Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013
![Page 1: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/1.jpg)
Michael Mullany
@mmullanymichael aaat sencha.com
Cirque Du Filter
Monday, October 21, 13
![Page 2: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/2.jpg)
2
Monday, October 21, 13
![Page 3: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/3.jpg)
3
First Framework for HTML5 MobileNow in version 2.3
Monday, October 21, 13
![Page 4: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/4.jpg)
APPLICATION
Sencha TouchTouch Interfaces
BROWSER ENGINES
UI: Templates + Controls + Containers
Foundation: OOP + MVC + RMI + Libraries
Data: Models + Stores + Connectors
JavaScriptHTML CSS
4
Canvas
Monday, October 21, 13
![Page 5: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/5.jpg)
Ford Dealer Showroom
Monday, October 21, 13
![Page 6: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/6.jpg)
Atlantic Wire Magazine
Monday, October 21, 13
![Page 7: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/7.jpg)
Smile Brands Clinic Automation
Monday, October 21, 13
![Page 8: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/8.jpg)
Motivating Question“Why Can’t We Do
Instagram, PhotoShop and Lightroom On the Web?”
Monday, October 21, 13
![Page 9: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/9.jpg)
Filter Effects
Visual transformations made before content is renderedColor manipulations
Convolutions & distortionsLighting effects
3 Species of FiltersCSS Filters (“shorthand” filters)
SVG Filters (referenceable from CSS)Custom Filters (OpenGL based)
Monday, October 21, 13
![Page 10: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/10.jpg)
http://html5-demos.appspot.com/static/css/filters/index.html
CSS Filter Short-‐hands
Apply filters to any HTML content via CSSFilter values are transitionable/animatable
blur() invert() contrast()
greyscale() hue-‐rotate opacity()
sepia() brightness() saturate()
drop-‐shadow() url(#svgfilter)
Monday, October 21, 13
![Page 11: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/11.jpg)
Source: caniuse.comMonday, October 21, 13
![Page 12: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/12.jpg)
Source: caniuse.com
4.2.2
Monday, October 21, 13
![Page 13: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/13.jpg)
Filters vs. Img or Canvas
Just like CSS, Filters help:Replace images with declarative text
Define once, apply manyCompact syntax
Particularly usefulBuilt-‐in noise generator, helpful pre-‐built functions
Avoid wire weight of noise effects in imagesAdding effects to user contributed content
Animatable with JavaScript (IE10) & <animate>
Monday, October 21, 13
![Page 14: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/14.jpg)
Why SVG Filters?
Much more powerful than shorthand CSS Filters
But still works with regular DOM content <video> <img> <p>
Monday, October 21, 13
![Page 15: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/15.jpg)
http://codepen.io/mullany/details/diolI
iOS7-‐Style Opaque Blur
Monday, October 21, 13
![Page 16: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/16.jpg)
http://codepen.io/mullany/pen/BkzKL
iOS7-‐Style Color Blends
Monday, October 21, 13
![Page 17: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/17.jpg)
http://codepen.io/mullany/pen/Hxwvb - From Inkscape
Textures & Grains
Monday, October 21, 13
![Page 18: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/18.jpg)
http://codepen.io/mullany/pen/nFwAu
Highlight Blur
Monday, October 21, 13
![Page 19: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/19.jpg)
http://codepen.io/mullany/pen/mnBqK
Focus Blur
Monday, October 21, 13
![Page 20: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/20.jpg)
http://codepen.io/mullany/pen/nfdab
Vignette
Monday, October 21, 13
![Page 21: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/21.jpg)
http://codepen.io/mullany/pen/ApInK
Selective GreyScale
Monday, October 21, 13
![Page 22: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/22.jpg)
http://codepen.io/mullany/pen/KrBoF
RGB Weighted Greyscales
Monday, October 21, 13
![Page 23: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/23.jpg)
Add http://codepen.io/mullany/pen/LpnvF
Black Point Manipulation
Monday, October 21, 13
![Page 24: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/24.jpg)
Add http://codepen.io/mullany/pen/LpnvF
Black Point Manipulation
Monday, October 21, 13
![Page 25: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/25.jpg)
http://codepen.io/mullany/pen/xqoIg
White Point Manipulation
Monday, October 21, 13
![Page 26: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/26.jpg)
http://codepen.io/mullany/pen/xqoIg
White Point Manipulation
Monday, October 21, 13
![Page 27: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/27.jpg)
http://codepen.io/mullany/pen/xqoIg
RGB Color Channel Separation
Monday, October 21, 13
![Page 28: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/28.jpg)
http://codepen.io/mullany/pen/oAqpF
Posterizing
Monday, October 21, 13
![Page 29: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/29.jpg)
http://codepen.io/mullany/pen/Hsrof
Sharpening & Softening
Monday, October 21, 13
![Page 30: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/30.jpg)
Instagrammaring
Monday, October 21, 13
![Page 31: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/31.jpg)
http://codepen.io/mullany/details/fdkmI
Shadow Customization
Monday, October 21, 13
![Page 32: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/32.jpg)
http://codepen.io/mullany/pen/xnthw
Lighting Animation
Monday, October 21, 13
![Page 33: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/33.jpg)
http://codepen.io/mullany/pen/xnthw
Lighting Animation
Monday, October 21, 13
![Page 34: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/34.jpg)
http://codepen.io/mullany/pen/xnthw
Lighting Animation
Monday, October 21, 13
![Page 35: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/35.jpg)
Fundamental FilterConcepts
Monday, October 21, 13
![Page 36: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/36.jpg)
Add sample text
SVG Filters Are Graphs
Input 2
Op
Input 3 Op
Output 1
Output 2
Combine Final Output
Input 1 “in”
“in2”
“result”
Monday, October 21, 13
![Page 37: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/37.jpg)
Add sample text
Filter Syntax
Declare in the <defs> section of your SVG<defs> <filter id= “myfilter”> ...filter primitives... </filter></defs>
Apply with filter property in CSS or SVG<text filter = “url(#myfilter)”>
p {-‐webkit-‐filter=”url(#myfilter)”;}
Monday, October 21, 13
![Page 38: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/38.jpg)
Key Concept: Filter RegionAdd sample text
• Default: 10% margin around content
• Common Mistakes-‐ Filter region clips large blurs-‐ Lighting bleeds into region-‐ SVG container clips large blurs
<svg>
<rect filter=”url(#F5)”>
Monday, October 21, 13
![Page 39: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/39.jpg)
Key Concept: Filter RegionAdd sample text
• Default: 10% margin around content
• Common Mistakes-‐ Filter region clips large blurs-‐ Lighting bleeds into region-‐ SVG container clips large blurs
<svg>
Default Filter Region
<rect filter=”url(#F5)”>
Monday, October 21, 13
![Page 40: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/40.jpg)
Add sample text
SVG Filter Toolbox
Monday, October 21, 13
![Page 41: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/41.jpg)
Add sample text
SVG Filter Toolbox
Inputs Operations Lighting Combinations
Source ColorMatrix Types Composite
SourceAlpha ComponentXfer Diffuse (matte) Blend
Image/Object ConvolveMatrix Specular (shiny) Merge
Flood (Color Fill) Morphology Sources
Turbulence (Noise) Displacement Distant Light
Background Tile | Offset Spot Light
Paint/Stroke Color GaussianBlur Point Light
Monday, October 21, 13
![Page 42: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/42.jpg)
Add sample text
SVG Filter Toolbox
Inputs Operations Lighting Combinations
Source ColorMatrix Types Composite
SourceAlpha ComponentXfer Diffuse (matte) Blend
Image/Object ConvolveMatrix Specular (shiny) Merge
Flood (Color Fill) Morphology Sources
Turbulence (Noise) Displacement Distant Light
Background Tile | Offset Spot Light
Paint/Stroke Color GaussianBlur Point Light
Monday, October 21, 13
![Page 43: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/43.jpg)
Add sample text
SVG Filter Toolbox
Inputs Operations Lighting Combinations
Source ColorMatrix Types Composite
SourceAlpha ComponentXfer Diffuse (matte) Blend
Image/Object ConvolveMatrix Specular (shiny) Merge
Flood (Color Fill) Morphology Sources
Turbulence (Noise) Displacement Distant Light
Background Tile | Offset Spot Light
Paint/Stroke Color GaussianBlur Point Light
Monday, October 21, 13
![Page 44: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/44.jpg)
Add sample text
SVG Filter Toolbox
Inputs Operations Lighting Combinations
Source ColorMatrix Types Composite
SourceAlpha ComponentXfer Diffuse (matte) Blend
Image/Object ConvolveMatrix Specular (shiny) Merge
Flood (Color Fill) Morphology Sources
Turbulence (Noise) Displacement Distant Light
Background Tile | Offset Spot Light
Paint/Stroke Color GaussianBlur Point Light
Monday, October 21, 13
![Page 45: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/45.jpg)
A Whirlwind Tour OfFilter Primitives
Monday, October 21, 13
![Page 46: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/46.jpg)
Inputs
Monday, October 21, 13
![Page 47: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/47.jpg)
Basic Inputs
SourceGraphic: the default input = the referring elementSourceAlpha: the alpha channel of the source contentfeImage: any image in URL format (or another element)
<feImage xlink:href="http://somedomain.com/image.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/>
<feImage xlink:href="url(#anElementInThisDoc)” x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/>
Monday, October 21, 13
![Page 48: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/48.jpg)
Color Fill
feFlood: colored rectangle
x,y, width, height, flood-‐color, flood-‐opacity
<feFlood x="5" y="10" width="100" height ="100" flood-‐color="rgb(24,25,250)" flood-‐opacity= “0.5”>
Monday, October 21, 13
![Page 49: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/49.jpg)
http://codepen.io/mullany/pen/duHbD
Turbulence
feTurbulence -‐ fast noise generator Steam, rippling, marbling, woodgrain etc.
Parameters: baseFrequency: X,Y (higher = more granular)numOctaves: 1,2,etc. (higher=more detail)type: fractalNoise (gas) or turbulence (liquid)
Monday, October 21, 13
![Page 50: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/50.jpg)
Basic Turbulence Outputs
1 Octave
2 Octave
4 Octave
freq 0.05 0.1 0.5
Monday, October 21, 13
![Page 51: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/51.jpg)
http://codepen.io/mullany/pen/duHbD
Add some other primitives ...
Monday, October 21, 13
![Page 52: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/52.jpg)
Transformations
Monday, October 21, 13
![Page 53: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/53.jpg)
When It’s UsefulGreyscales
Tints & SepiasBrightness & Contrast
Separating pure R/G/B from mixed colors Eliminating one or more color channels
Extracting brightness informationChanging saturation or hue (but there are bugs)
Greyscales: http://codepen.io/mullany/pen/baLkH
Key Concept: Color Matrix
Monday, October 21, 13
![Page 54: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/54.jpg)
http://docs.webplatform.org/wiki/svg/elements/feColorMatrix
ColorMatrix Shorthands
3 shorthands + Matrix (5x4)saturatehuerotate
luminancetoAlpha
Monday, October 21, 13
![Page 55: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/55.jpg)
http://codepen.io/mullany/pen/kAbhD
LuminanceToAlpha
Monday, October 21, 13
![Page 56: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/56.jpg)
Matrix Demo: http://codepen.io/mullany/pen/qJCDk
R-‐>R G-‐>R B-‐>R A-‐>R k1
R-‐>G G-‐>G B-‐>G A-‐>G k2
R-‐>B G-‐>B B-‐>B A-‐>B k3
R-‐>A G-‐>A B-‐>A A-‐>A k4
R
G
B
A
1
R
G
B
A
1
X =
Input Output
adds fixed offset
e.g. factor by which blue channel inputis multiplied and added to red channel output
e.g. factor by which red channel input is multiplied and added to alpha channel
output
Monday, October 21, 13
![Page 57: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/57.jpg)
When It’s UsefulWhite and Black Point Changes
Posterization“Instagram-‐style” Color Curves Manipulation
Color Thresholding (Floor & Ceiling)Gamma Correction
Color Specific Brightness/ContrastAlpha Channel Manipulation
Key Concept: ComponentTransfers
Monday, October 21, 13
![Page 58: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/58.jpg)
http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer
ComponentTransfer Types
Manipulate each color channel independently.
5 Typesidentity, table, discrete, linear, gamma
linear: slope*input + interceptgamma: amp * (input^exponent) + offsettable: input ranges mapped to new ranges
discrete: input ranges mapped to specific values
Monday, October 21, 13
![Page 59: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/59.jpg)
http://codepen.io/mullany/pen/oAqpF
Range Mapping
Table Discrete
Monday, October 21, 13
![Page 60: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/60.jpg)
http://svg-wow.org/filterEffects/ripple.svg - Credit: Erik Dahlstrom
Key Concept: Displacement Map
When It’s UsefulDistortions (w/Turbulence)
Animated DistortionsPoor-‐man’s vertex shader (!)
Monday, October 21, 13
![Page 61: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/61.jpg)
Displacement Map In Action
MSource Graphic
MDisplace in X by Blue Value
Dis
plac
e in
Y b
y Re
d Va
lue
DisplacementMap
Monday, October 21, 13
![Page 62: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/62.jpg)
MM
Displacement Map In Action
MSource Graphic
MDisplace in X by Blue Value
Dis
plac
e in
Y b
y Re
d Va
lue
DisplacementMap
Monday, October 21, 13
![Page 63: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/63.jpg)
Lighting E!ects
Monday, October 21, 13
![Page 64: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/64.jpg)
Key Concept: Lighting Effects
When It’s UsefulPseudo-‐3D depth effectsGlossy buttons & text
Generating mask shapes within a filterEmbossing
Animating Light Source Positions (!)
but...Lighting implementations are stillpretty rough around the edges
Monday, October 21, 13
![Page 65: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/65.jpg)
Lighting Effects
Two types Diffuse (matte) vs. Specular (shiny)
Three light sourcesPoint, distant and spot
Monday, October 21, 13
![Page 66: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/66.jpg)
Diffuse vs. Specular
Diffuse is matte lighting, similar to applying semi-‐transparent gradients over content
Specify a diffuseConstant (how concentrated the light is)kernelUnitLength
Specular adds shiny highlights
Both can be used to simulate 3D from 2D content by generating a “bump map” (pseudo z values) from the alpha channel
Monday, October 21, 13
![Page 67: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/67.jpg)
Diffuse Lighting
Monday, October 21, 13
![Page 68: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/68.jpg)
http://codepen.io/mullany/pen/aFnpc
Specular Lighting
Monday, October 21, 13
![Page 69: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/69.jpg)
Combinations
Monday, October 21, 13
![Page 70: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/70.jpg)
Key Concept: Combinations
When It’s UsefulLayering contentBlending content
MaskingApplying textures
Softening and sharpening
Monday, October 21, 13
![Page 71: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/71.jpg)
http://codepen.io/mullany/pen/BkzKL
Combinations Part 1
feMerge: simple z-‐layering
feBlend: shorthand combinationsNormal: (=Merge)
Multiply: Multiply pixel values togetherScreen: Sum -‐ Product of pixel values
Darken: Use darker pixelLighten: Use lighter pixel
Monday, October 21, 13
![Page 72: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/72.jpg)
http://codepen.io/mullany/details/plgDv
Combinations Part 2
Shorthand compositingOver: same as Merge
In: parts of source 1 that overlap source 2Out: parts of source 1 that don’t overlap source 2
Atop: Over minus OutXor: Over minus In
Arithmetic: Product + souce 1 + source 2 + offset
Monday, October 21, 13
![Page 73: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/73.jpg)
<svg width="800" height="650" viewBox="0 0 800 650">
<defs> <filter id="displacement" filterUnits="objectBoundingBox"> <feTurbulence type="fractalNoise" baseFrequency=".1" numOctaves="2" result="turb"> <animate attributeType="XML" attributeName="baseFrequency" values=".1; .12; .1" dur="16s" repeatCount="indefinite"/> </feTurbulence> <feDisplacementMap in="SourceGraphic" in2="turb" scale="20" result="displace" xChannelSelector="B"/> <feGaussianBlur in="displace" result="displaceblur" stdDeviation="1"/> <feComponentTransfer in="displaceblur" result="displaceR"> <feFuncR type="discrete" tableValues=".4 .4"/> </feComponentTransfer> <feComposite operator="over" in2="SourceGraphic" in="displaceR"/> </filter>
Monday, October 21, 13
![Page 74: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/74.jpg)
Deep Dive: Focus Blur
Monday, October 21, 13
![Page 75: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/75.jpg)
Compositing: Focus Blur
Spotlight + Blur + LumToAlpha +Invert
+xor w/original + composite on blurred source
Monday, October 21, 13
![Page 76: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/76.jpg)
http://codepen.io/mullany/pen/mnBqK
<filter id="f1" x="0%" y="0%" width="100%" height="100%">
<feDiffuseLighting result="diffSpot" diffuseConstant="1" lighting-‐ color="white"> <feSpotLight id="loc" x = "50" y = "100" z = "150" pointsAtX = "200" pointsAtY = "200" pointsAtZ = "40" specularExponent ="12" limitingConeAngle="20"/> </feDiffuseLighting> <feGaussianBlur in="diffSpot" result="blurSpot" stdDeviation="3"/> <feColorMatrix in="blurSpot" result="alphaSpot" type="luminanceToAlpha"/> <feComponentTransfer in="alphaSpot" result="invertSpot"> <feFuncA type="table" tableValues="1 0 0 0"/> </feComponentTransfer>
<feComposite operator="xor" result="inFocus" in2="SourceGraphic" in="invertSpot"/> <feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="6"/> <feComposite operator="over" in="inFocus" in2="outfocus"/> </filter>
Monday, October 21, 13
![Page 77: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/77.jpg)
filterfactory.mobi
Monday, October 21, 13
![Page 78: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/78.jpg)
Browser SupportBugs
Errata
Monday, October 21, 13
![Page 79: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/79.jpg)
Browser Support & Bugs
Bugs & Missing Features ie moz webkitBackground as input P X XObjects as feImage input P X PFill & stroke paint as input P X XColor space interpolation P P Chrome
Correct lightsource positions P P X<animate> support X P PFilter references P X XCorrect default filter resolution P P Chrome
SVG Filters via CSS X X Chrome
Monday, October 21, 13
![Page 80: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/80.jpg)
Filter Gotchas
Difficulties reading example codeSilent defaults make code hard to follow sometimesSourceGraphic is default input for first primitive
Previous primitive output is default input for all othersfeMerge composites all leaf results
Filter animations have mixed performance on mobile
Monday, October 21, 13
![Page 81: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/81.jpg)
http://codepen.io/mullany/pen/fxsuE
hue-‐rotate & high saturation colors
Explicit HSL Colors
hue-‐rotate()of 100% Sat
Red
Monday, October 21, 13
![Page 82: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/82.jpg)
http://codepen.io/mullany/pen/dqIGE
Better Accuracy With Mid-‐Saturation
Explicit HSL Colors
hue-‐rotate()of 50% Sat
Red
Monday, October 21, 13
![Page 83: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/83.jpg)
http://codepen.io/mullany/pen/rpgHu
saturate() has lightness issues!
saturate()of 100% Sat
Green
Explicit HSL Colors
Monday, October 21, 13
![Page 84: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/84.jpg)
New Proposed Filters
hue-‐rotate-‐hsl()saturate-‐hsl()
&feHSL{}
Convert from RGB to HSL before transformation, preserving saturation & lightness correctly
Monday, October 21, 13
![Page 85: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/85.jpg)
In Conclusion...
SVG Filters Work In All Edge BrowsersBugs Are There But Fairly MinorHardware Acceleration FTWSpiffy New Effects Possible
www.webplatform.orghttp://www.w3.org/TR/SVG/filters.html
Monday, October 21, 13
![Page 86: Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c842f34a795985748b45e1/html5/thumbnails/86.jpg)
Q&A
Monday, October 21, 13