svg with improperly positioned tiled images
Hi, I have an .svg file (the_svg_file) which contains 2 images (I tried both embedded data uri using base64 string and an external website url). When previewed, the images work fine:
Using cairosvg to convert this svg file to a png however results in the images appearing but not where they're supposed to be:
I'm using the following code to invoke cairosvg, to wit:
>>> import cairosvg
>>> cairosvg.svg2png(
bytestring=the_svg_file.read_bytes(),
write_to=output_file.as_posix(),
unsafe=True
)
Wondering if I'm missing anything in the command to ensure that I get parity between the raw svg and the target output file, post-conversion.
Hi,
Could you please share your SVG file?
Apologies, I've since moved on but if it helps debug, an earlier commit where I applied it had the following template format that would generate the svg file:
<svg width="1200" height="628" viewBox="0 0 1200 628" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
</style>
<defs>
{% for author in authors -%}
<pattern id="pattern{{loop.index0}}" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image{{loop.index0}}" transform="scale(0.00159744)" />
</pattern>
<image id="image{{loop.index0}}" width="626" height="626" xlink:href="{{ author.img_path }}" />
{%- endfor %}
<clipPath id="clip0_8_48">
<rect width="1200" height="628" fill="white" />
</clipPath>
<clipPath id="clip1_8_48">
<rect width="257" height="51" fill="white" transform="translate(38 46)" />
</clipPath>
</defs>
...
{% for author in authors -%}
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Open Sans" font-size="20"
letter-spacing="0em">
<tspan data-count="{{author.count}}" x="{{ author.pos }}" y="510.61">{{ author.name|truncate(25, true) }}</tspan>
</text>
<circle cx="{{ author.circle }}" cy="519" r="57" fill="url(#pattern{{loop.index0}})" />
<text xml:space="preserve" style="white-space: pre" font-family="Open Sans" font-size="15"
letter-spacing="0em">
<tspan x="{{ author.pos }}" y="539.966" fill="darkgray">{{ author.job|truncate(25, true) }}</tspan>
<tspan x="{{ author.pos }}" y="561.966" fill="darkgray" font-style="italic">{{ author.dept|truncate(35, true) }}</tspan>
</text>
{%- endfor %}
</svg>