Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg with improperly positioned tiled images #400

Open
justmars opened this issue Sep 2, 2023 · 2 comments
Open

svg with improperly positioned tiled images #400

justmars opened this issue Sep 2, 2023 · 2 comments

Comments

@justmars
Copy link

justmars commented Sep 2, 2023

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.

@liZe
Copy link
Member

liZe commented Sep 2, 2023

Hi,

Could you please share your SVG file?

@justmars
Copy link
Author

justmars commented Sep 2, 2023

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants