Hello there,

We have a problem that we are not sure what is the way to approach. I'll try to state the problem and then look for suggestions.

Problem
We are trying to inline all of our external SVG files which use

<img src="path/file.svg"/>

to an inlined

<svg/>

content. We want to do this because we want to be able to style the SVG content.


Idea #1
Use a javascript library to convert all images with SVG path to an inline version. The problem with this is that we really care about performance. We assume that if we do this, each time we call Prince, it would need to fetch the SVGs and replace the content in HTML. This sounds really expensive.


Idea #2
Use an

<object />

tag. This works, however, according to various sources, the style for the SVG needs to be included in the SVG. Not ideal since we don't know the final colors until generation. We have some custom colors, per our needs from a UI, so we don't really know the final HTML until generation.


Idea #3
Do some pre-processing before passing it to PrinceXML. This is the easiest, but it sounds like a headache for our frontend engineers because they have no way of testing.

So ideally, we'd like to use idea #1, but we need a way to cache data in javascript so we don't fetch the same resource over and over. Any suggestion? Or are there in features coming soon that might resolve this? Ideally, we'd like to use something like a localStorage where we can pass path to in CLI so that it can be used like any other browsers.

I'm not sure I understand idea #2, as Prince treats <object> the same as <img>, basically.

Idea #1 might be slow if there are lots of SVGs requiring HTTP access, and Prince doesn't have full AJAX support yet.

For idea #3, if you are generating your HTML from code then inlining the SVG files there might be the best way. It should still work in browsers as well, right?

Thanks for the response. The problem with #3 is that our engineers usually work on the template without generating the HTML dynamically. Our assets, images and SVGs are coming from a different repository. What they usually end up doing is hardcode values for testing and making sure that everything works.

If they would have to run it through the whole pipeline then it would really limit them. So instead, we prefer to just support images with SVG and have the presentation layer inline instead of something before. This makes more sense since this a responsibility of the templates.

For #2, if you read https://css-tricks.com/using-svg/ then there is a section about objects. It talks about the difference <object> and <img>.

It sounds like you favor #3?

Are there no future plans to support localstorage as a file, like how PrinceXML handles cookies.

Edited 17 Jun 2015 by amirraminfar

Oh, Prince supports external style sheets in SVG images regardless of whether they are included from <img> elements, <object> elements, or as background images or generated content. So that should not be an issue.

Can you include a reference to the style sheet from within the SVG, so you don't need to inline it in the HTML?

Thanks mikeday. We can't include a reference to our css file because our assets are bundled in a jar file and PrinceXML can't read it. We will probably just use your suggestions and go with #3.