Skip to content

Instantly share code, notes, and snippets.

@stela5
Created August 17, 2011 22:52
Show Gist options
  • Save stela5/1152847 to your computer and use it in GitHub Desktop.
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.
Display the source blob
Display the rendered blob
Raw
<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