@@ Line 1: / Line 1: @@
-This page is build from suggestion of Jeff Muizelaar on [https://bugzilla.mozilla.org/show_bug.cgi?id=119490#c82 Implement SVG Font bug], Thanks to him.
+A proposal for an alternative to SVG Fonts by Robert O'Callahan is here: [https://wiki.mozilla.org/SVGOpenTypeFonts SVG OpenType Fonts]
-A proposal for a third way solution by Robert O'Callahan is here : [https://wiki.mozilla.org/SVGOpenTypeFonts SVG OpenType Fonts]
+== A technical comparison of WOFF vs. SVG formats ==
-== A technical comparison of WOFF vs. SVG formats ==
+=== WOFF fonts ===
+WOFF is essentially a wrapper that contains sfnt-based fonts (TrueType, OpenType, or Open Font Format) that have been compressed using a WOFF encoding tool to enable them to be embedded in a web page. The format uses zlib compression (specifically, the compress2 function), typically resulting in a filesize reduction from TTF of over 40%. (source: Wikipedia)
+W3C Specification: [http://www.w3.org/TR/WOFF/ WOFF file Format 1.0]
+=== SVG Fonts ===
+SVG Fonts is a feature of SVG that allows SVG to be used as glyphs when displaying text (applied using the CSS @font-face rule).
+There are actually two versions of SVG Fonts with different capabilities (which are unfortunately constantly being conflated in discussion and on this page). [http://www.w3.org/TR/SVGTiny12/fonts.html SVG Tiny Fonts] from the SVG Tiny 1.2 specification allows only path outlines in glyphs. [http://www.w3.org/TR/SVG/fonts.html SVG Full Fonts] from the SVG 1.1 Full specification allows arbitrary SVG content in glyphs.
+''yapgraph : Do you think that we should separate SVG Tiny and SVG Full in the table ? And add Roc SVG Opentype proposal ?''
+''jrmuizel: I'd suggest moving splitting out SVG tiny to a separate page'
-=== Comparison Table (tentative) ===
+=== Features comparison Table ===
 {|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0; text-align:center;"
@@ Line 24: / Line 37: @@
 |style="border-style: solid; border-width: 0 1px 0 0; background-color: #A5F47D;"| Yes
 |style="border-style: solid; border-width: 0"| No, most of the time
-|-
-|style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| Vector outlines
-|style="border-style: solid; border-width: 0"| No
-|style="border-style: solid; border-width: 0 1px 0 0; background-color: #A5F47D;"| Yes always
 |-
 |style="border-style: solid; border-width: 0 3px 0 0; background-color: #999;"| @font-face linking
@@ Line 50: / Line 59: @@
 |-
 |style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| XML human-readable tags, editable with a text editor
-|style="border-style: solid; border-width: 0 1px 0 0"| No
+|style="border-style: solid; border-width: 0 1px 0 0"| Not really<sup>7</sup>
 |style="border-style: solid; border-width: 0; background-color: #A5F47D;"| Yes
 |-
@@ Line 80: / Line 89: @@
 |style="border-style: solid; border-width: 0 1px 0 0; background-color: #A5F47D;"| Yes
 |style="border-style: solid; border-width: 0"| No<sup>2</sup>
+|-
+|style="border-style: solid; border-width: 0 3px 0 0; background-color: #999;"| Vector outlines
+|style="border-style: solid; border-width: 0 1px 0 0; background-color: #999;"| Yes
+|style="border-style: solid; border-width: 0 1px 0 0; background-color: #999;"| Yes
 |-
 |style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| SVG Filters
@@ Line 97: / Line 110: @@
 |style="border-style: solid; border-width: 0"| Yes
 |-
-|style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| Arbitrary glyphs
+|style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| Arbitrary glyphs<sup>8</sup>
-|style="border-style: solid; border-width: 0 1px 0 0"| No ?
+|style="border-style: solid; border-width: 0 1px 0 0"| No
 |style="border-style: solid; border-width: 0; background-color: #A5F47D;"| Yes
 |-
-|style="border-style: solid; border-width: 0 3px 0 0;"| Text in a Shape<sup>4</sup>
+|style="border-style: solid; border-width: 0 3px 0 0; background-color: #999;"| Text in a Shape<sup>4</sup>
-|style="border-style: solid; border-width: 0 1px 0 0"| No ?
+|style="border-style: solid; border-width: 0 1px 0 0; background-color: #999;"| Yes
-|style="border-style: solid; border-width: 0;"| Yes<sup>4</sup>
+|style="border-style: solid; border-width: 0; background-color: #999;"| Yes
 |-
 |style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| Interaction with other SVG modules
@@ Line 114: / Line 127: @@
 |-
 |style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| Opentype forward-compatible<sup>6</sup>
+|style="border-style: solid; border-width: 0 1px 0 0; background-color: #A5F47D;"| Yes
+|style="border-style: solid; border-width: 0"| No
+|-
+|style="border-style: solid; border-width: 0 3px 0 0; background-color: #F9F9F9;"| [http://www.microsoft.com/typography/otspec/features_ae.htm Opentype features]
 |style="border-style: solid; border-width: 0 1px 0 0; background-color: #A5F47D;"| Yes
 |style="border-style: solid; border-width: 0"| No
@@ Line 125: / Line 142: @@
 |style="border-style: solid; border-width: 0"| Potential, have to be scoped
 |}
-''jrmuizel: please take out entries that are the same for both woff and svg''
-''yagraph: Is it working for you with background colors ?''
 <sup>1</sup> using data: URIs.
@@ Line 141: / Line 155: @@
 <sup>6</sup> Will receive all the benefits of the font industry's ongoing efforts to improve the OpenType specification with new font features and language support
-=== WOFF fonts ===
+<sup>7</sup><s>Font files can be edited with a text editor using [http://sourceforge.net/projects/fonttools/ ttx]</s> It suppose at least two conversion to manipulate a file, and TTX can't manipulate WOFF file in the latest version. you have to rely on [http://code.typesupply.com/wiki/woffTools woffTools], which can't generate a ttx file from a WOFF file now.
-==== what is it ? ====
-WOFF is essentially a wrapper that contains sfnt-based fonts (TrueType, OpenType, or Open Font Format) that have been compressed using a WOFF encoding tool to enable them to be embedded in a web page. The format uses zlib compression (specifically, the compress2 function), typically resulting in a filesize reduction from TTF of over 40%. (source: Wikipédia)
-==== W3C Specification ====
-[http://www.w3.org/TR/WOFF/ WOFF file Format 1.0]
-==== WOFF Features ====
+<sup>8</sup> SVG 1.1 Full allow to draw anything and define it as a glyph
-* Meant to be used in a flow of text in an HTML document
+''jrmuizel: please take out entries that are the same for both woff and svg'' /
-* Pixel perfect with a correct render engine
+''yagraph: Is it working for you with background colors ?'' /
-* Essentially the same features than Truetype or Opentype fonts, but compressed and with metadata, to be embedded on the web as a "package" file, in a similar way than an image.
+''jrmuizel: I don't see the point of having them at all'' /
-* can be used for regular text through @font-face
+''yagraph: Some people (including me) may suppose that an unlisted feature is not supported by one part (example with Text in a Shape), so I prefer to let it be visible and known'' /
-* can have metadata
-* stylised with CSS
-* kerning
-* hinting
-* full support for shaping for any language supported by OpenType
-* forward-compatible: will receive all the benefits of the font industry's ongoing efforts to improve the OpenType specification with new font features and language support
-* text decoration
-* overflow
-* can be put along a path
-* can receive SVG filters through Mozilla CSS-SVG filters extension
-* no DOM access to glyphs or subsets
-* not meant to be animated
-* not meant to be used as a drawing element in a vector context (no alignment, transform, etc.)
-''roc: I have no idea what this means. You can use WOFF fonts in SVG just fine.''
-* concise spec, so easy to implement
-=== SVG fonts ===
+''jrmuizel: what does "arbitrary glyphs" mean?'' /
+''yagraph : SVG allow to draw anything and define it as a glyph, including shapes that are supposed to be "forbidden" in Opentype glyphs. As Roc listed in his SVG OpenType Fonts proposal : Editable text where the glyphs display a "shiver" effect, Draw freehand graphics with self-intersecting curves and use them as glyphs, Japanese "emoji" with colored glyphs. And I can add a blurred character with SVG filters, Animated glyphs, Gradient filled glyphs, Spiro spline curves drawed glyphs...''
-==== what is it ? ====
-All versions of the SVG 1.1 specification, including the SVGT subset, define a font module, allowing the creation of fonts within an SVG document.
+''yagraph : Removed "Subpixel antialiasing" feature : it's not a format feature but a render engine feature. Depending on the render engine, SVG is most of the time antialiased, as Opentype''
-The SVG specification allows for CSS to be applied to SVG documents in a similar manner to HTML documents, and the @font-face rule can be applied to text in SVG documents. (source: Wikipédia)
-==== W3C Specification ====
-[http://www.w3.org/TR/SVG/fonts.html SVG 1.1 Fonts module]
-[http://www.w3.org/TR/SVGTiny12/fonts.html SVG Tiny 1.2 Font module]
-==== SVG Fonts Features ====
-* Sub-set of the Scalable Vector Graphics specification. Meant to be used in a vector design context with all SVG features and others modules.
-* Vector outlines
-* Absolute coordinates
-* DOM access to glyphs or subsets
-* Can be embeded in a SVG file as a DOM element among others without adding or linking more files (SVG as a "document" format).
-* Editable in a text editor, with human-readable tags
-* Can be styled with CSS
-* Works with @font-face
-* Can contain metadata
-* Kerning
-* Word Spacing
-* Text Decoration
-* Can be animated
-* Can receive gradients
-* Can be put along a path
-* Can receive SVG filters
-* No hinting
-* No overflow (but [http://twitter.com/svgwg/statuses/43456435518058496 planed for SVG 2.0])
-* Limited support for shaping: ligatures and some very simple Arabic support only
 == Size Comparison ==
-=== Yagraph ===
+=== yagraph ===
 WOFF: With [http://www.fontsquirrel.com/fontface/generator @font-face generator], the DejaVu font converted to WOFF result in a 23,6 Kio file.
+''jrmuizel: does the woff file include additional tables that svg file does not?'' /
+''yagraph : I don't think so... But I'm not sure. I asked for the same subsets.''
+''jrmuizel: if you convert the SVG font to WOFF how big a file do you get?''
+''yagraph: I can't find any tool able to do to such a conversion, sorry.''
 SVG: With [http://www.fontsquirrel.com/fontface/generator @font-face generator], the DejaVu font converted to SVG result in a 52,5 Kio file (uncompressed).
 SVGZ : With [http://www.fontsquirrel.com/fontface/generator @font-face generator], the DejaVu font converted to SVGZ result in a 13,5 Kio file.
 === roc ===
@@ Line 223: / Line 194: @@
 Most of the time, a WOFF file is obtained through a converter tool
+''jrmuizel: I don't think it's valuable to include conversion tools here''
 * [http://fontforge.sourceforge.net/ FontForge] (FOSS font editor tool)
@@ Line 228: / Line 200: @@
 * The python command line [http://code.typesupply.com/wiki/woffTools woffTools] used with [http://sourceforge.net/projects/fonttools/ TTX/FontTools].
 * Font Squirrel online converter : [http://www.fontsquirrel.com/fontface/generator @font-face generator]
+* Fontographer
+* FontLab Studio
 ==== SVG Fonts creation tools ====
-SVF Font can be obtained from converters, but they also come from creation tools (textual or graphical).
+SVF Font can be obtained from converters, but they also come from creation tools (textual or graphical). ''jrmuizel: converting from other formats takes away most of the advantages that SVG fonts could have. It's also important to note whether a tool produces just SVG or actual SVG fonts.''
 * any text editor
 * [http://fontforge.sourceforge.net/ FontForge] (FOSS font editor tool)
-* [http://inkscape.org/ Inkscape] (FOSS SVG authoring tool)
+''jrmuizel: Does FontForge support any features with SVG fonts that it doesn't support with other formats?'' /
+''yagraph: I not aware of any. SVG font is an output among others in Fontforge.'' /
+* [http://inkscape.org/ Inkscape] (FOSS SVG authoring tool) ''yagraph: Since v0.47, Inkscape include an [http://wiki.inkscape.org/wiki/index.php/ReleaseNotes047 Initial SVG Fonts support], and can be included in a font creation workflow ''
 * Font Squirrel on line converter : [http://www.fontsquirrel.com/fontface/generator @font-face generator]
 * [http://www.svgmaker.com SVGmaker]
@@ Line 256: / Line 232: @@
 == An estimation of the additional security risk of implementing SVG fonts ==
-As [http://developers.slashdot.org/comments.pl?sid=1713004&cid=32847010 Borris Zbarsky points out] "Once you put an <iframe> in a glyph, all sorts of issues arise". SVG is powerful, so security holes can be proportionally important.
+As [http://developers.slashdot.org/comments.pl?sid=1713004&cid=32847010 Boris Zbarsky points out] "Once you put an <iframe> in a glyph, all sorts of issues arise". SVG is powerful, so security holes can be proportionally important.
 But SVG Fonts do not introduce particularly more dangerous behaviors the the rest of the SVG Spec. After all, we can put an <iframe> in any <path>, and it should not behave more badly than in a <glyph>.
@@ Line 289: / Line 265: @@
 * Webkit : [http://www.webkit.org/projects/svg/status.xml Webkit SVG status]
 * Opera : [http://www.opera.com/docs/specs/presto24/svg/attributes/ SVG Attributes support in Opera Presto 2.4]
+* IE9 : none
+''jrmuizel: this section needs to contain information on what svg font subset other browsers support. i.e. do any of them support color?''
 == A list of use-cases for SVG fonts ==
@@ Line 295: / Line 274: @@
 * Fancy, animated titles and presentation on the web, keeping semantic, without any @font-face linking ([http://svg-wow.org/text-effects/text-effects.xhtml  here is a mostly working example], rely on WOFF to compensate lack of SVG Fonts in Firefox, and [http://svg-wow.org/camera/camera.xhtml here is another], but text is converted to path).
-''roc: What's wrong with @font-face linking? It's just a different syntax for referencing a font.''
+''roc: What's wrong with @font-face linking? It's just a different syntax for referencing a font.'' /
 ''yagraph: In some context, we can't link another file with @font-face, for example a SVG animation to add in Wikipedia, or in SVG as a single document linked in an email context.''
-''jrmuizel: The fancy titles use case seems mostly served by an svg image with alt text''
+''jrmuizel: The fancy titles use case seems mostly served by an svg image with alt text.'' /
 ''yagraph: You're right, but you loose text selection, and an alt attribute do not have the same semantic value than a text tag ... ''
 * Produce a SVG document with some text in [http://inkscape.org/ Inkscape], Adobe Illustrator, or any SVG authoring tool, and render it correctly within Firefox.
+''jrmuizel: does Adobe Illustrator produce SVG fonts? Inkscape does not seem to.'' /
+''yagraph: Since v0.47, Inkscape include an [http://wiki.inkscape.org/wiki/index.php/ReleaseNotes047 Initial SVG Fonts support], can use them, and can be included in a font creation workflow... But do not seem to be able to produce an SVG Font on it own. Illustrator can save to SVG, but I don't know if it can produce an SVG Font''
+''lhmathies: Illustrator since CS3 at least saves SVG with fonts. I'm here because I was hoping to be able to use SVG instead of PDF, but lack of font support in FF kills that.''
 * [http://sozi.baierouge.fr/wiki/doku.php Sozi] support without killing semantic
 * [http://typism.appspot.com/fonts/index Typism] support
-''jrmuizel: seems like javascript could also just construct a woff file''
+''jrmuizel: seems like javascript could also just construct a woff file.''
-''yagraph: true, but it's a lot of triggers and complexity, for something that can be clean and elegant with SVG Fonts thanks to DOM access''
+''yagraph: true, but it's a lot of triggers and complexity, for something that can be clean and elegant with SVG Fonts thanks to DOM access.'' /
+''jrmuizel: there's no reason a javascript library can't provide a clean and elegant api'' /
+''yagraph: I was not only thinking to construct a WOFF file, but more to manipulate and create glyphs, edit them, etc.''
 * Could be used for any web-based typographic or typing game with SMIL or Javascript ([https://gaming.mozillalabs.com/ potential example source] (good luck to start such a project with no DOM access !))
-''roc: We already have Web-based typing games that use Opentype fonts and @font-face.''
+''roc: We already have Web-based typing games that use Opentype fonts and @font-face.'' /
 ''yagraph: same argument than above : true, but it's a lot of triggers and complexity, for something that can be clean and elegant with SVG Fonts thanks to DOM access''
 ''yagraph: I've removed the Erik Dahlström [http://my.opera.com/MacDev_ed/blog/2011/01/25/on-mythbusting-and-the-web-and-why-svg-fonts-are-sometimes-useful list], irrelevant here as Roc pointed.''
+''Jelle: How about generating SVG fonts dynamically? I can't see that happen with WOFF or whatever, but for instance creating handwritten fonts to give content a more personal aspect would be easy with SVG fonts. I can imagine a multitude of cases that would benefit of such use.
+Animated characters to show how to produce them would be nice for those learning Hanzi or Kanji and Alphabets alike. But I don't consider that to be that important.
+I would love to just use SVG fonts and not have to ask people to use Opera, Chrome, Safari or others that do at least support 1.2 Tiny. Webkit seems to do a decent job at it, so how possible is it to implement the code used there? SVG fonts do support Unicode like ''FL'', ''IK'' and other kerned pairs, so I don't quite understand what makes Indic scripts so different. Wouldn't that rather be a matter for the textprocessor to handle rather than the font format? (i.e. combination X+Y=''glyph#unicode''). The nice thing about SVG fonts is that you can easily define whatever glyph and give it its character code.''
 == Internationalization Issues ==

SVGFonts: Difference between revisions

SVGFonts (view source)

Revision as of 07:26, 20 July 2012