Converting text to SVG
require 'rexml/document' include REXML a = "Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.".split(' ') doc = Document.new doc.add_element('text') oline = Element.new('line') char_count = 0 a.each do |word| oword = Element.new('word') oword.text = word.to_s oword.add_attribute('length',char_count) oline << oword char_count += word.length if char_count > 50 doc.root << oline oline = Element.new('line') char_count = 0 end end doc.root << oline puts char_count puts doc
Here's a sample of the XML created
<text> <line> <word length='0'>Open</word><word length='4'>source</word><word length='10'>is</word> <word length='12'>a</word><word length='13'>development</word><word length='24'>method</word> <word length='30'>for</word><word length='33'>software</word><word length='41'>that</word> <word length='45'>harnesses</word> </line> <line> <word length='0'>the</word><word length='3'>power</word> <word length='8'>of</word><word length='10'>distributed</word><word length='21'>peer</word> <word length='25'>review</word><word length='31'>and</word><word length='34'>transparency</word> <word length='46'>of</word><word length='48'>process.</word> </line> <line> <word length='0'>The</word> <word length='3'>promise</word><word length='10'>of</word><word length='12'>open</word> <word length='16'>source</word><word length='22'>is</word><word length='24'>better</word> <word length='30'>quality,</word><word length='38'>higher</word><word length='44'>reliability,</word> </line> <line> <word length='0'>more</word><word length='4'>flexibility,</word><word length='16'>lower</word> <word length='21'>cost,</word><word length='26'>and</word><word length='29'>an</word> <word length='31'>end</word><word length='34'>to</word><word length='36'>predatory</word> <word length='45'>vendor</word> </line> <line> <word length='0'>lock-in.</word> </line> </text>
The XML is then transformed to SVG using the following XSL file
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output encoding="UTF-8" method="xml" indent="yes"/> <xsl:template match="text"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="sketch" class="sketch"> <xsl:apply-templates select="line"/> </g> </svg> </xsl:template> <xsl:template match="line"> <xsl:variable name="xfactor">12</xsl:variable> <xsl:variable name="yfactor">20</xsl:variable> <xsl:variable name="pos" select="position()"></xsl:variable> <xsl:apply-templates select="word"> <xsl:with-param name="xfactor" select="$xfactor"></xsl:with-param> <xsl:with-param name="y" select="$pos * $yfactor + 10"></xsl:with-param> </xsl:apply-templates> </xsl:template> <xsl:template match="word"> <xsl:param name="xfactor"/> <xsl:param name="y"/> <text xmlns="http://www.w3.org/2000/svg" font-size="12pt" x="{@length * $xfactor +10}" y="{$y}" id="t1"><xsl:value-of select="."/></text> </xsl:template> </xsl:stylesheet>
The final SVG output [twitxr.com] shows 5 lines of text with each word as a separate SVG text element.