Log in / Register

Forum › Bugs

multiple SVG regions with common <defs>

Johann
We generate a XHTML page with many UML diagrams in SVG format, and had the idea to have a single global <defs> element for common symbols.

The code is like this:
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>SVG marker test page</title>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
			<defs>
				<marker id="arrow-global"
					viewBox="0 0 16 10" refX="16" refY="5"
					markerWidth="16" markerHeight="10"
					orient="auto">
					<path d="M 0 0 L 16 5 L 0 10 z" style="fill:red;" />
				</marker>
			</defs>
		</svg>
	<h2>Use global defs</h2>
		<svg xmlns="http://www.w3.org/2000/svg"
				width="100" height="50">
			<path d="M20,20 l50,0 l30,30" marker-end="url(#arrow-global)" style="stroke:black; fill:none;"/>
		</svg>
	<h2>Use local defs</h2>
		<svg xmlns="http://www.w3.org/2000/svg"
				width="100" height="50">
			<defs>
				<marker id="arrow-local"
					viewBox="0 0 16 10" refX="16" refY="5"
					markerWidth="16" markerHeight="10"
					orient="auto">
					<path d="M 0 0 L 16 5 L 0 10 z" style="fill:blue;" />
				</marker>
			</defs>
			<path d="M20,20 l50,0 l30,30" marker-end="url(#arrow-local)" style="stroke:black; fill:none;"/>
		</svg>
	</body>
</html>


When generating the PDF document, the first arrow head (with reference to the global definition) is not rendered!

Is this a bug in Prince, or is something wrong with the code (maybe need a special DTD?)?

I've attached the output document and a bitmap of the correct(?) rendering from Firefox or Opera.

- - -
Johann

  1. firefox_rendering.png‎ 3.7 kB ‎
    Firefox rendering
  2. prince_output.png‎ 5.6 kB ‎
    Prince output
mikeday
At the moment Prince treats each chunk of SVG as a separate island, so defs in one chunk will not be visible to other chunks. In the next release of Prince we will be applying the <style> element across all chunks, and we may be able to support global defs as well. I'll add this to the roadmap.
anandthakker
Hi there,

I believe this issue still exists. When I run 
prince prince-svg-issue.html -o test.pdf
on the attached file, I get the following warning:

prince: prince-svg-issue.html: warning: svg: referenced ID infinity does not exist.

Notice that in the output (attached), the second svg renders fine, I think because the <use> reference is to an element within the same svg block.
  1. prince-svg-issue.html‎ 1.1 kB
  2. test.pdf‎ 40.3 kB ‎
    prince output
mikeday
Yes, the <style> element is applied globally, but SVG elements are still "islands" that can only reference elements within the same SVG chunk. For now. :)
mikeday
This has been fixed in Prince latest builds! :)
Johann
Great Thanks!

- - -
Johann

mn4367
So it's maybe time to modify the code which I wrote here for versions of Prince younger or equal to the latest builds at the time of writing this post?
mikeday
Sure, it could check navigator.appVersion just to be sure. :D
johnathonwright
Using prince 10 with the HTML above, I get a blank PDF and the warning "svg: referenced ID infinity does not exist" ... any thoughts? We have an SVG "sprite" file provided by our designer... works well on the web and we'd like to use it for PDFs as well...
mikeday
This was fixed in Prince 11, and there are further improvements to SVG support in Prince 12.