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.

Sign up for GitHub

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

Jump to bottom

Help needed: Rendering of SVG with embedded CSS #1021

Closed
ptr1120 opened this issue Jan 6, 2020 · 2 comments
Closed

Help needed: Rendering of SVG with embedded CSS #1021

ptr1120 opened this issue Jan 6, 2020 · 2 comments

Comments

@ptr1120
Copy link

ptr1120 commented Jan 6, 2020

Hello,

first of all thanks for this great project.
I would like to embed SVG images into my Pdf. As mentioned in #75 SVG images can be embedded as Base64 data URL.

I tried to render the following Html + Svg:

<!doctype html>
<html lang="en" class="gr__localhost">
<head>
  <meta charset="utf-8">
</head>
<body>
  <main>
    <svg width="500" height="300">
      <style>
        .dblue {
          fill: rgb(40, 130, 225);
          stroke: white;
        }
        .blue {
          fill: rgb(57, 131, 171);
        }
      </style>
      <g id="dots">
        <path class="blue"
          d="M37,195 L16,195 C10,195 5,189 5,183 L5,16 C5,10 10,5 16,5 L61,5 C39,11 24,26 24,62 C24,75 27,91 37,100 C55,117 114,125 119,130 C121,133 
		     120,137 120,140 C120,150 114,150 105,150 C92,150 79,149 66,148 C59,147 51,145 44,145 C30,145 28,156 28,167 L28,174 C28,186 28,192 37,195Z" />
        <path
          d="M165,185 C167,185 169,186 169,189 C169,191 167,193 165,193 C162,193 161,191 161,189 C161,186 162,185 165,185Z"
          class="dblue" />
        <path
          d="M178,170 C180,170 182,171 182,174 C182,176 180,178 178,178 C176,178 174,176 174,174 C174,171 176,170 178,170Z"
          class="dblue" />
        <path
          d="M178,132 C180,132 182,133 182,136 C182,138 180,140 178,140 C176,140 174,138 174,136 C174,133 176,132 178,132Z"
          class="dblue" />
        <path d="M178,83 C180,83 182,84 182,87 C182,89 180,91 178,91 C176,91 174,89 174,87 C174,84 176,83 178,83Z"
          class="dblue" />
        <path d="M150,80 C152,80 154,81 154,84 C154,86 152,88 150,88 C147,88 146,86 146,84 C146,81 147,80 150,80Z"
          class="dblue" />
      </g>
    </svg>
  </main>
</body>
</html>

And replaced the svg node by an image tag with the base64 encoded SVG:

<img src="data:image/svg+xml;charset=utf-8;base64, PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjMwMCI+CiAgICAgIDxzdHlsZT4KICAgICAgICAuZGJsdWUgewogICAgICAgICAgZmlsbDogcmdiKDQwLCAxMzAsIDIyNSk7CiAgICAgICAgICBzdHJva2U6IHdoaXRlOwogICAgICAgIH0KCiAgICAgICAgLmJsdWUgewogICAgICAgICAgZmlsbDogcmdiKDU3LCAxMzEsIDE3MSk7CiAgICAgICAgfQogICAgICA8L3N0eWxlPgogICAgICA8ZyBpZD0iZG90cyI+CiAgICAgICAgPHBhdGggY2xhc3M9ImJsdWUiCiAgICAgICAgICBkPSJNMzcsMTk1IEwxNiwxOTUgQzEwLDE5NSA1LDE4OSA1LDE4MyBMNSwxNiBDNSwxMCAxMCw1IDE2LDUgTDYxLDUgQzM5LDExIDI0LDI2IDI0LDYyIEMyNCw3NSAyNyw5MSAzNywxMDAgQzU1LDExNyAxMTQsMTI1IDExOSwxMzAgQzEyMSwxMzMgCgkJICAgICAxMjAsMTM3IDEyMCwxNDAgQzEyMCwxNTAgMTE0LDE1MCAxMDUsMTUwIEM5MiwxNTAgNzksMTQ5IDY2LDE0OCBDNTksMTQ3IDUxLDE0NSA0NCwxNDUgQzMwLDE0NSAyOCwxNTYgMjgsMTY3IEwyOCwxNzQgQzI4LDE4NiAyOCwxOTIgMzcsMTk1WiIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0iTTE2NSwxODUgQzE2NywxODUgMTY5LDE4NiAxNjksMTg5IEMxNjksMTkxIDE2NywxOTMgMTY1LDE5MyBDMTYyLDE5MyAxNjEsMTkxIDE2MSwxODkgQzE2MSwxODYgMTYyLDE4NSAxNjUsMTg1WiIKICAgICAgICAgIGNsYXNzPSJkYmx1ZSIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0iTTE3OCwxNzAgQzE4MCwxNzAgMTgyLDE3MSAxODIsMTc0IEMxODIsMTc2IDE4MCwxNzggMTc4LDE3OCBDMTc2LDE3OCAxNzQsMTc2IDE3NCwxNzQgQzE3NCwxNzEgMTc2LDE3MCAxNzgsMTcwWiIKICAgICAgICAgIGNsYXNzPSJkYmx1ZSIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0iTTE3OCwxMzIgQzE4MCwxMzIgMTgyLDEzMyAxODIsMTM2IEMxODIsMTM4IDE4MCwxNDAgMTc4LDE0MCBDMTc2LDE0MCAxNzQsMTM4IDE3NCwxMzYgQzE3NCwxMzMgMTc2LDEzMiAxNzgsMTMyWiIKICAgICAgICAgIGNsYXNzPSJkYmx1ZSIgLz4KICAgICAgICA8cGF0aCBkPSJNMTc4LDgzIEMxODAsODMgMTgyLDg0IDE4Miw4NyBDMTgyLDg5IDE4MCw5MSAxNzgsOTEgQzE3Niw5MSAxNzQsODkgMTc0LDg3IEMxNzQsODQgMTc2LDgzIDE3OCw4M1oiCiAgICAgICAgICBjbGFzcz0iZGJsdWUiIC8+CiAgICAgICAgPHBhdGggZD0iTTE1MCw4MCBDMTUyLDgwIDE1NCw4MSAxNTQsODQgQzE1NCw4NiAxNTIsODggMTUwLDg4IEMxNDcsODggMTQ2LDg2IDE0Niw4NCBDMTQ2LDgxIDE0Nyw4MCAxNTAsODBaIgogICAgICAgICAgY2xhc3M9ImRibHVlIiAvPgogICAgICA8L2c+CiAgICA8L3N2Zz4=">

Rendering the SVG in the browser gives me the following result:
Capture

But the generated Pdf looks like:
Capture1

So the embedded CSS styles have not been rendered.
I am using WeasyPrint 51, version 50 showed the same result.
Using CairoSvg with the same SVG and embedded style shows correct results.

Any suggestions to get SVG with CSS working?

Best regards
Peter
@liZe
Copy link
Member

liZe commented Jan 6, 2020

Hi!

Your SVG file has to include the SVG namespace in its svg tag: <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">. Adding the namespace solves your problem 😉.

(For the record: Firefox, Chrome and Safari refuse to render an SVG file without the namespace.)

@liZe liZe closed this as completed Jan 6, 2020
@ptr1120
Copy link
Author

ptr1120 commented Jan 11, 2020

You are right. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ptr1120 @liZe