Генерация SVG с помощью XSLT

Этот пример показывает, как XSLT может пригодиться для генерации изображений в формате SVG, например, графиков.

Дан список музыкальных композиций в виде XML-документа.

<?xml version="1.0" encoding="utf-8"?>
<PlayList>
  <Track Id="1170056tuNb" Length="280">
    <Artist>Рихард Вагнер</Artist>
    <Title>Полёт валькирии</Title>
  </Track>
  <Track Id="938304vu1E" Length="163">
    <Artist>Эдвард Григ</Artist>
    <Title>В пещере горного короля</Title>
  </Track>
  <Track Id="35532014SEz" Length="187">
    <Artist>Иоган Бах</Artist>
    <Title>Токката и фуга ре-минор</Title>
  </Track>
  <Track Id="264667GXiD" Length="203">
    <Artist>Антонио Вивальди</Artist>
    <Title>Времена года. Лето. Шторм</Title>
  </Track>
  <Track Id="613982Fj9E" Length="103">
    <Artist>Джузеппе Верди</Artist>
    <Title>Триумфальный марш (Аида)</Title>
  </Track>
</PlayList>

Атрибут Length элемента Track — это продолжительность композиции в секундах. Выведем эти данные в виде гистограммы:

XSLT-преобразование:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns="http://www.w3.org/2000/svg">
  
  <xsl:output method="xml" indent="yes" />

  <xsl:template match="PlayList">
    <svg width="640" height="480">
      <g>
        <xsl:apply-templates select="Track"/>
      </g>
    </svg>
  </xsl:template>

  <xsl:template match="Track">
    <xsl:variable name="y" select="position() * 40"/>
    <text id="text_{position()}" x="10" y="{$y - 5}" 
        font-size="12" font-family="Monospace" text-anchor="left">
      <xsl:value-of select="concat(Artist, ': ', Title)"/>
    </text>
    <rect id="rect_{position()}" x="10" y="{$y}" height="20" width="{@Length}" 
      stroke-width="1" stroke="#000000" fill="#d4ffaa"/>
    <text id="length_{position()}" x="13" y="{$y + 14}" 
      font-size="12" font-family="Monospace" text-anchor="left">
      <xsl:value-of select="@Length"/>
      <xsl:text><![CDATA[ сек.]]></xsl:text>
    </text>
  </xsl:template>

</xsl:stylesheet>

Полученный SVG будет имеет следующую структуру:

<?xml version="1.0" encoding="utf-8"?> 
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
  <g> 
    <text id="text_1" x="10" y="35" font-size="12" font-family="Monospace" text-anchor="left">Рихард Вагнер: Полёт валькирии</text> 
    <rect id="rect_1" x="10" y="40" height="20" width="280" stroke-width="1" stroke="#000000" fill="#d4ffaa" /> 
    <text id="length_1" x="13" y="54" font-size="12" font-family="Monospace" text-anchor="left">280 сек.</text> 
    ...
  </g> 
</svg>

Полностью SVG файл можно видеть здесь.

В данном примере показано использование пространства имён по умолчанию.

Атрибут xmlns="http://www.w3.org/2000/svg" элемента xsl:stylesheet, говорит о том, что все элементы полученного XML-документа будут принадлежать пространству имён http://www.w3.org/2000/svg, если не указано иное.