SVG images with variable/dynamic text

[horisonten]

Hello all,

Just wanted to ask if anyone knows an elegant way of reusing .svg images but replacing the text content of that image?

Use case: You want to reuse an image which includes measurements. The image is the same regardless of the publication but the measurements varies. Which measurements should be added would best be controlled using a ditaval and some kind of database (Excel file in its simplest form for example).

[xephon]

I would give the SVG domain a try and inject the text with <keyword> elements. I have never tried that and would be thankful if you would post your experience here.

https://www.oxygenxml.com/dita/1.3/spec ... ments.html

[horisonten]

I've done some test (with my not at all advanced knowledge...)

Controlling the text of the .svg using CSS doesn't seem possible.
The <tspan> where the text is added cannot be replaced using "content="my custom text" since it has something to do with how .svgs are rendered. I can make the text invisible with "display: none" but it cannot be changed after rendering.

What I can do as a hack is to embed all text content into the .svg file, but have them hidden/not visible by default, and then make them visible depending on the product. Like this:

[product="product1"] #Layer_4 {
display: block;
}
[product="product2"] #Layer_3 {
display: block;
}

Layer_3 and Layer_4 are just text layers.
But this only works for the HTML transformation currently. I cannot make this work in the PDF transform, the CSS is simply not making any of the layers visible in the PDF... I'm not sure how to solve it. If there are any hints I would highly appreciate it.

[julien_lacour]

Hello,

One solution could be to use SVG Templates images in the topics (as basic images). The single limitation is that the Excel data must be referenced inside the ditamap.
This limitation is present of course to avoid the possibility to read inside other files, as this can be a security threat.

Here is a small sample of what you can obtain based of these templates:

excel.zip

(8.28 KiB) Downloaded 9 times

Regards,
Julien

[horisonten]

What I can do as a hack is to embed all text content into the .svg file, but have them hidden/not visible by default, and then make them visible depending on the product. Like this:

[product="product1"] #Layer_4 {
display: block;
}
[product="product2"] #Layer_3 {
display: block;
}

Layer_3 and Layer_4 are just text layers.
But this only works for the HTML transformation currently. I cannot make this work in the PDF transform, the CSS is simply not making any of the layers visible in the PDF... I'm not sure how to solve it. If there are any hints I would highly appreciate it.

Thanks for the suggestion Julien, I will give this a try.

Could you perhaps explain to me why the quoted technique doesn't work with the PDF transform?

It would solve my most pressing issue pretty neatly, but I can only make it work in the merged html and not in the actual transformed PDF. So I guess it has something to do with the processing/rendering order when transforming. Perhaps the svg has already been placed/resolved before the CSS being applied. Which would explain why the CSS isn't affecting the display setting of each layer.

[julien_lacour]

Hello,

Oxygen PDF Chemistry only applies CSS rules on embedded SVG, not on referenced images.
First, make sure the 'use.css.for.embedded.svg' parameter value is set to 'yes'.
Then move your SVG content inside the DITA topic, for example:

Code: Select all

<svg-container>
    <svg:svg width="4in" height="1in" viewBox="0 0 240 40">
        <svg:text x="10" y="30" class="small">
            You 
            <svg:tspan id="Layer_3">definitely</svg:tspan>
            are
            <svg:tspan id="Layer_4">not</svg:tspan>
            a banana!
        </svg:text>
    </svg:svg>
</svg-container>

Then, set your rules from the CSS, for example:

Code: Select all

#Layer_3 {
  display: none;
}
#Layer_4 {
  display: block;
  stroke: red;
}

In my example the result should be "You are not a banana!" and 'not' should be in red.

Regards,
Julien

[horisonten]

Hello,

One solution could be to use SVG Templates images in the topics (as basic images). The single limitation is that the Excel data must be referenced inside the ditamap.
This limitation is present of course to avoid the possibility to read inside other files, as this can be a security threat.

Here is a small sample of what you can obtain based of these templates:
excel.zip

Regards,
Julien

I have tested now, and this seems to work as expected. At least in the PDF transform that is. I cannot make it work using the Webhelp transform. From what I can gather, it seems as if the Webhelp parameters is missing the following crucial parameter: "expand.xpath.in.svg.templates". This needs to be set to "Yes" in the PDF transform for it to work. But I can't find a corresponding alternative in the Webhelp.

How can I make it so that the Xpath expressions are expanded in the Webhelp transform as well?

[julien_lacour]

Hello,

Unfortunately the SVG templates are only available for PDF outputs, you need a separate process for Webhelp.

Regards,
Julien

[horisonten]

Thanks for clarifying. I will look into another solution for the webhelp output in that case!