Search

Just out of curiousity and since Symphony is built so heavily around XML: Is there a way to generate SVG images / files on-the-fly with Symphony?

I just uploaded a static SVG file like this one into my images folder:

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="{$workspace}/css/styles.css"?>

<svg version="1.2" baseProfile="tiny" id="parts" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="503.078px" height="281.386px" viewBox="0 0 503.078 281.386" xml:space="preserve">

<g>
        <path fill-rule="evenodd" fill="#3A93CE" d="M17.735,88.432c-23.762,0-23.531-36.17,0-36.17c7.846,0,9.827,4.319,15.197,6.607
            l0.058-0.05c4.222,1.701,7.543,0.609,7.543-4.402V2.484C40.533,1.12,41.649,0,43.017,0h51.932c5.012,0,6.101,3.325,4.404,7.547
            l0.051,0.055c-2.293,5.368-6.609,7.347-6.609,15.2c0,23.526,36.17,23.757,36.17,0c0-7.675-4.406-9.738-6.68-15.322
            C120.63,3.29,121.731,0,126.716,0h52.027c1.366,0,2.482,1.12,2.482,2.484v51.933c0,5.012-3.32,6.104-7.543,4.402l-0.057,0.05
            c-5.371-2.288-7.352-6.607-15.198-6.607c-23.53,0-23.761,36.17,0,36.17c7.675,0,9.739-4.406,15.315-6.681
            c4.192-1.651,7.482-0.551,7.482,4.432v52.028c0,1.367-1.116,2.482-2.482,2.482h-52.084c-4.937,0.025-6.023,3.305-4.375,7.48
            c2.273,5.582,6.68,7.645,6.68,15.32c0,23.758-36.17,23.527-36.17,0c0-7.854,4.316-9.832,6.609-15.201l-0.051-0.053
            c1.689-4.205,0.615-7.521-4.347-7.547H43.017c-1.367,0-2.483-1.115-2.483-2.482V86.183c0-4.982-3.291-6.083-7.483-4.432
            C27.474,84.025,25.409,88.432,17.735,88.432z"/>
</g>
</svg>

In my view I am embedding it as follows:

<object data="{$workspace}/images/image.svg" type="image/svg+xml"/>

It would be nice to define its contents in a more programmatic way through XSLT. Has this ever been done before?

Thanks for any input.

Yes it’s possible i have done it just recently!

You can create a page called for example 'svgimage' and set the Type to 'SVG'
Use this in the page template:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    doctype-public="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">
    <!-- svg data here -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="">
    </svg> 
</xsl:template>

</xsl:stylesheet>

You can attach a datasource and do your xslt on the svg code.

What might be even easier is to embed the svg code directly in you html.

Do you need this maybe ?

<xsl:copy-of select="document($image-path)/*" />

If you want the svg inside of the xml data you can have a reflection field to get the path of the svg (something like: {entry/svgFieldName/@path}{entry/svgFieldName/filename})

Add the reflection field as a parameter in the datasource $ds-sectionWithSvgUpload.reflectionFieldName (using the reflection field here because you cannot expose an upload field as a ds parameter)

Create a remote datasource to fetch svg data using the ds-parameter, remote datasource url could be: {$root}{$ds-sectionWithSvgUpload.reflectionFieldName}

This way your svg will be available inside the xml so you can modify it in xsl before render (as a standalone svg document or inline svg in a html page).

Note that you need to manually edit the remote datasource to add $ds-sectionWithSvgUpload.reflectionFieldName as a dependency (so remote datasource wait for this parameter before being executed).

Another way to have the svg data embed in you xml is to use the xml field where you can paste the svg (probably a bit less user friendly than the upload field for backend admin).

Hi and thanks everyone for the useful input. I was on holiday, hence the late reply. Cremol's solution works like a charm. I simply pasted my SVG code directly into my XSL file and it works!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details