image/svg+xml
Future of SVG
Tavmjong Bah
Libre Graphics 2013
Future of SVG
Tavmjong Bah
Libre Graphics 2013
The Future of SVGand Web Standards
Tavmjong Bah
Libre Graphics 2013MadridApril 10th
* Introduction* Short History of SVG* SVG 2* Web Standards
Overview
Introduction
SVG:
Scalable Vector Graphics
(x1,y1)
(x2,y2)
Bitmap
Vector
Introduction, cont.
All displays are raster(bitmap) devices. Thedifference is when therasterization takes place.*
*Well, almost, plotters and some earlyCRT's displayed vectors directly.
Introduction, cont.
Where can you find SVG used? * Web browsers (all major browsers) * Mobile phones (SVG Tiny 1.2) * Drawing programs (Inkscape!) * TV set-top boxes * Ebooks (EPUB 3.0) * Plotters/Cutters * Mapping * Document storage (XML) * Braille for graphics?
Short History
SVG based on PGML (PostScript) and VML (MS)SVG uses XML (EXtensible Markup Language) * Mix with other XML based specifications: XHTML, MathML, etc. (name spaces). * XML is easy to parse. * XML allows round-tripping between formats. * Can be styled with CSS.Example:<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <circle cx="50" cy="50" r="30" fill="red" style="stroke:blue"/></svg>
Attribute
Property (styleable)
Short History
SVG is a W3C standard. SVG 1: Published in 2001 SVG 1.1: Published in 2003 SVG 1.2: Draft 2005, never published. What happened to SVG 1.2? Politics! Adobe bought Flash (2005). Microsoft ignored SVG. (No support until IE9) W3C stumbled with XHTML. (With help from Microsoft — IE6)
Short History, cont.
Recent events: WHATWG/HTML5 (abandon move to XHTML). SVG included in HTML5 (with MATHML). Adobe gives up on Flash. Microsoft finally supports SVG!SVG 1.1 Second Edition: 2011 Maintenence version. Bug fixes.
SVG 2
The working group has expanded. 45 Memberswith an active core of about 10.
SVG 2 is rapidly being developed!
Less active participation by: Apple, KDDI, Microsoft, ...
Active participation by: Adobe, Canon, Google, IBM, Inkscape, Institute Telecom, Mozilla, Opera, W3C
* Group dominated by browser vendors.* HTML/CSS bias, many member also belong to the CSS working group (which is much, much larger).* Members are not designers.
SVG 2 Structure
SVG 1.1 is being ripped apart into an SVG 2 Coreand lots of modules shared with CSS (andpossibly a few modules that will be orphaned,e.g. SVG Fonts). This is a good thing... Modules shared with CSS are more likely to be quickly incorporated into browsers, e.g. CSS3 colors. Although, being incorporated doesn't always mean that they can be used by SVG, e.g. 3d transforms. (SVG is low in browser priorities).And a bad thing... CSS/HTML interests dominate. SVG group can't make changes by itself (e.g. image-rendering).
SVG 2 Structure, cont
SVG 1.1
SVG 2CSS Animations Not SMIL based.CSS Backgrounds Uses SVGCSS ColorCSS Compositing and BlendingCSS Exclusions and Shapes Replace "Flowed Text"?CSS Filter EffectsCSS Fonts Not same as SVG FontsCSS Image Values and Replacement ContentCSS MaskingCSS Regions Partial replacement for "Flowed Text"? CSS Text DecorationCSS TransformsCSS Style Attribute Syntax CSS Web Fonts May include SVG in TTF
SVG 2 Additions
<solidColor> element:Allows custom palletes.
MyRed
Notes:- Inkscape simulates this by using one-stop gradients. Doesn't work for gradient stops.- One can style multiple objects with same color using CSS. Doesn't work if color used in different ways.
SVG 2 Additions
Flexible paint order:
In SVG 1.1 stroke is always on top.
Stroke on top.
Fill ontop.
Markeron bottom.
Fill Only
B
B
B
B
B
SVG 2 Additions
Flexible stroke position:
In SVG 1.1 stroke is evenly placed.
Deferred...
If you want this, holler at the SVG WG!
SVG 2 Additions
Arcs Line Join:
Bevel
Round
Miter
Arcs
P
P1
P2
P3
Aoutside
Boutside
Extend using circleswith same curvatureas at end point.
SVG 2 Additions
Hatches:
Common way to shade shapes in technical drawings.
Can be simulated in SVG 1.1 by patterns but patterns aresubject to anomalies at pattern boundaries. Patterns alsoproblematic for plotters, engravers, etc. that use SVG for input.
SVG 2 Additions
Markers: Color match!
SVG 1.1 does not allow automatic marker-strokecolor matching.
Not just for markers... should also work for patterns, gradients, etc.Also: 'context-fill'.
<marker fill="context-stroke" .../>
SVG 1.1
SVG 2.0
SVG 2 Additions
Markers: Cutouts:
Solves problem of path sticking out from arrowhead.
My preference:"Clip path"
Currentlyin spec:"Knock-outshapes"
Path
Marker (Clip)
Marker on Path
SVG 2 Additions
Markers: Placement:
Middle of segments
At fixed distancewith pattern
SVG 2 Additions
Mesh Gradients:
SinglePatch
SVG 2 Additions
Mesh Gradients:
About an hour with abuggy version of Inkscape.
One pepper is a photo, the other a drawing.
SVG 2 Additions
Mesh Gradients:
Non-smooth transitions cause Mach Banding.
SVG 2 Additions
Mesh Gradients:
Adobe and CoralDraw smooth mesh, exporting8x8 patch array for each "native" patch.
SVG/Inkscape
Adobe Illustrator
SVG 2 Additions
Mesh Gradients:
Adobe seems to use a cubic Bezier profile for interpolation.
FromIsaelEisenberg
CSS
CSS Animations: Declarative animation and transitions that do not rely on JavaScript. May replace SMIL animation in SVG. Already available in HTML in most browsers.CSS Color: Adds HSL. Already can be used in SVG in browsers.CSS Compositing and Blending Adds more compositing and blending modes. Don't need SVG filters for blending.
CSS, cont.
CSS Exclusions and Shapes Text flow in or around regions. Possible replacement for SVG 1.2 flowed text. Needs to be integrated with SVG.CSS Filter Effects: Copies SVG 1.1 filters adding some shorthands, e.g. drop shadow. May include GPU driven shaders.CSS Transforms: Adds 3d transforms. In principle, works with SVG.
Missing
Missing features:Often requested but not in specification:* Flowed text* Pagination* Gradients along strokes* ConnectorsIn specification but browsers refuse to implement:* SVG Fonts (Firefox, Internet Explorer)* SMIL Animation (Internet Explorer)
Wish List
* Layers. Inkscape uses groups to simulate layers.* Perspective transforms. CSS Transforms?* Screening filter primitive.
8000 Circles
See http://tavmjong.free.fr/SVG/SCREENING/
Wish List, cont.
* Connectors. Inkscape includes connectors by using a private name space and recalculating the paths after an object is moved or connector changed.
Wish List cont.
* Warped text. (Text between two lines.)
SVG 2 — Procedure
- SVG Working group created a list of "requirements" based on public input. http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements- Inclusion into SVG 2 is dependent on someone taking responsibilty for the new feature. http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Commitments You can help!- Once in specification, tests must be written.- Multistep approval process including pubic comment period.
Implementation
All specification features must have at least twoconforming implementations or they are dropped.Since browser vendors are the most active, theyare the most likely to provide the implementations.
Gecko (Firefox)Presto (Opera) Will be replaced by Webkit/BlinkTrident (IE) Not actively being developed?Webkit (Chrome/iOS)Blink (Chrome future) Fork of Webkit
Implementation, cont
Other SVG implementatios: Batik (Apache) Java based, used by FOP. GPAC (Telecom Paris Tech) Inkscape StaticNot longer in development(?) Abbra Adobe plug-in BitFlash Ikivio Motorola
What You Can Do
If there is a feature that you want/need: * Talk to SVG/CSS/HTML Working Group Members. * Join the public mailing lists: - SVG: http://lists.w3.org/Archives/Public/www-svg/ - SVG/CSS task force: http://lists.w3.org/Archives/Public/public-fx/ - CSS (very high traffic) http://lists.w3.org/Archives/Public/www-style/
What You Can Do
If there is a feature that you want/need, cont.: * Submit comments on drafts: - SVG: https://svgwg.org/svg2-draft/Overview.html - CSS: http://www.w3.org/Style/CSS/current-work.en.html * Tell the browsers vendors. * Tell Adobe.
Thanks!
http://tavmjong.free.fr/
Exciting times.
http://www.w3.org/Graphics/SVG/