Created
August 17, 2011 22:52
-
-
Save stela5/1152847 to your computer and use it in GitHub Desktop.
Since SVG 1.1 does not officially support a standard for multiline text, this document represents a "best-fit" standard.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" width="500" height="500"> | |
<title>SVG 1.1 Multiline Text Standard [Stela 5]</title> | |
<desc>Since SVG 1.1 does not officially support a standard for multiline text, this document represents a "best-fit" standard. License: http://creativecommons.org/licenses/by/3.0/</desc> | |
<!-- | |
Notes: | |
* Don't include DOCTYPE in SVG file: https://jwatt.org/svg/authoring/#doctype-declaration | |
* You should use the same font-family for all font variations: http://saf.li/a8bIm | |
* You should specify both the screen name and PostScript name: http://blog.gesteves.com/post/36097597/helvetica-neue-light | |
* The order of font-face entries should be bold italic, italic, bold, then regular: http://www.w3.org/TR/CSS2/fonts.html#algorithm | |
* You should use font-weight 700 instead of bold (and 400 instead of normal): http://jsfiddle.net/xYzeC/1/ | |
* You should include the SVG font-face specification for legacy client compatibility (e.g. Squiggle): http://www.w3.org/TR/SVG/fonts.html#FontFaceElement | |
* You should use xml:space="preserve" to keep whitespace formatting of a tspan element: http://reference.sitepoint.com/html/script/xmlspace | |
* You should always specify units for font-size (default to px): http://jwatt.org/svg/authoring/#specifying-units | |
* The W3C recommends a line height of 1.2em: http://www.w3.org/TR/REC-CSS1/#line-height | |
* You should include the sodipodi namespace, 'line' role, and '0em' for Inkscape compatibility: http://wiki.inkscape.org/wiki/index.php/TextOutputDev | |
* Don't include non-standard SVG elements such as flowRoot, textArea, or -inkscape-font-specification: http://saf.li/88dpp | |
* Firefox does not support unitless font-size in CSS style attribute, use SVG attribute instead: http://jwatt.org/svg/authoring/#the-style-attribute | |
* Inkscape is buggy with em units in dy: https://bugs.launchpad.net/inkscape/+bug/168845 & https://bugs.launchpad.net/inkscape/+bug/262528 | |
* Inkscape does not support the CSS3 @font-face standard: http://wiki.inkscape.org/wiki/index.php/CSS_Support | |
* Squiggle does not support the CSS3 @font-face standard: https://issues.apache.org/bugzilla/show_bug.cgi?format=multiple&id=24898 | |
Example font: | |
http://www.google.com/webfonts/specimen/Lobster+Two | |
http://www.google.com/webfonts#UsePlace:use/Collection:Lobster+Two | |
http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic | |
http://googlefontdirectory.googlecode.com/hg/lobstertwo/ | |
--> | |
<defs> | |
<style xmlns="http://www.w3.org/1999/xhtml" type="text/css"> | |
<![CDATA[ | |
@font-face { | |
font-family: 'Lobster Two'; | |
font-style: italic; | |
font-weight: 700; | |
src: local('Lobster Two Bold Italic'), local('LobsterTwo-BoldItalic'), | |
url('http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/LEkN2_no_6kFvRfiBZ8xpARV2F9RPTaqyJ4QibDfkzM.woff') format('woff'); | |
} | |
@font-face { | |
font-family: 'Lobster Two'; | |
font-style: italic; | |
font-weight: 400; | |
src: local('Lobster Two Italic'), local('LobsterTwo-Italic'), | |
url('http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/Ul_16MSbfayQv1I4QhLEoNkZXW4sYc4BjuAIFc1SXII.woff') format('woff'); | |
} | |
@font-face { | |
font-family: 'Lobster Two'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Lobster Two Bold'), local('LobsterTwo-Bold'), | |
url('http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/bmdxOflBqMqjEC0-kGsIiDqR_3kx9_hJXbbyU8S6IN0.woff') format('woff'); | |
} | |
@font-face { | |
font-family: 'Lobster Two'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Lobster Two'), local('LobsterTwo'), | |
url('http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/Law3VVulBOoxyKPkrNsAaIbN6UDyHWBl620a-IRfuBk.woff') format('woff'); | |
} | |
]]> | |
</style> | |
<font-face font-family="Lobster Two" font-style="italic" font-weight="700"> | |
<font-face-src> | |
<font-face-uri xlink:href="http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/LEkN2_no_6kFvRfiBZ8xpGsGzsqhEorxQDpu60nfWEc.ttf"/> | |
</font-face-src> | |
</font-face> | |
<font-face font-family="Lobster Two" font-style="italic" font-weight="400"> | |
<font-face-src> | |
<font-face-uri xlink:href="http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/Ul_16MSbfayQv1I4QhLEoOLrC4Du4e_yfTJ8Ol60xk0.ttf"/> | |
</font-face-src> | |
</font-face> | |
<font-face font-family="Lobster Two" font-style="normal" font-weight="700"> | |
<font-face-src> | |
<font-face-uri xlink:href="http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/bmdxOflBqMqjEC0-kGsIiJ_TkvowlIOtbR7ePgFOpF4.ttf"/> | |
</font-face-src> | |
</font-face> | |
<font-face font-family="Lobster Two" font-style="normal" font-weight="400"> | |
<font-face-src> | |
<font-face-uri xlink:href="http://themes.googleusercontent.com/static/fonts/lobstertwo/v2/Law3VVulBOoxyKPkrNsAaJ0EAVxt0G0biEntp43Qt6E.ttf"/> | |
</font-face-src> | |
</font-face> | |
</defs> | |
<g id="example"> | |
<title>example</title> | |
<desc>Regular\nItalic\nBold\nBold Italic</desc> | |
<text font-family="Lobster Two" font-size="80px" text-anchor="middle" fill="black" x="250" y="100"> | |
<tspan sodipodi:role="line" x="250" dy="0em" font-style="normal" font-weight="400" xml:space="preserve">Regular</tspan> | |
<tspan sodipodi:role="line" x="250" dy="1.2em" font-style="italic" font-weight="400" xml:space="preserve">Italic</tspan> | |
<tspan sodipodi:role="line" x="250" dy="1.2em" font-style="normal" font-weight="700" xml:space="preserve">Bold</tspan> | |
<tspan sodipodi:role="line" x="250" dy="1.2em" font-style="italic" font-weight="700" xml:space="preserve">Bold Italic</tspan> | |
</text> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment