CairoSVG icon indicating copy to clipboard operation
CairoSVG copied to clipboard

svg with improperly positioned tiled images

Open justmars opened this issue 2 years ago • 2 comments

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:

Screenshot 2023-09-02 at 12 57 46 PM

Using cairosvg to convert this svg file to a png however results in the images appearing but not where they're supposed to be:

Screenshot 2023-09-02 at 1 02 32 PM

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.

justmars avatar Sep 02 '23 05:09 justmars

Hi,

Could you please share your SVG file?

liZe avatar Sep 02 '23 07:09 liZe

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>

justmars avatar Sep 02 '23 12:09 justmars