Add support for inline SVG #75

barryvan · 2013-04-24T07:07:30Z

At the moment, to use SVG within WeasyPrint, you need to embed it (generally via an tag). It'd be really useful if WeasyPrint could handle inline SVG as well.

In other words, one should be able to do the following:

<!doctype html>
<svg style="width: 100px; height: 100px;">
  <rect width="100px" height="100px" style="fill: #c00"/>
</svg>

and get a red square.

In our particular scenario, we're generating HTML for WeasyPrint by performing an XSLT transformation on an XML document -- and in some scenarios, we're hoping to generate SVG graphics (bar charts and the like) dynamically as part of this.

The text was updated successfully, but these errors were encountered:

SimonSapin · 2013-04-24T07:13:43Z

Yes, I’d say this is a missing feature. I wonder if you could get away with WeasyPrint giving a parsed subtree to CairoSVG, but it gets more tricky when document stylesheets apply to inline SVG elements.

In the meantime as a work-around, you could either use data: URLs, or use a custom "URL fetcher" that returns dynamically generated SVG based on an identifier or other parameters in the URL. Flask-WeasyPrint builds on the latter idea.

barryvan · 2013-04-24T07:29:52Z

Hmm, yes, I hadn't thought of document styles... The data: URI works (I just tested it), and will allow us to embed static SVG images directly quite easily. Dynamic, XSLT-generated SVGs would still be a problem in that case -- albeit a problem outside the scope of WeasyPrint!

To be honest, I'd probably be super-happy if WeasyPrint passed the SVG subtree to CairoSVG for rendering, ignoring document styles -- it wouldn't necessarily be conformant, but it'd be a huge step forward in any case. I suspect that inline styles are the norm for SVG images at the moment anyway.

graingert · 2013-12-03T10:39:46Z

Yes, I’d say this is a missing feature. I wonder if you could get away with WeasyPrint giving a parsed subtree to CairoSVG, but it gets more tricky when document stylesheets apply to inline SVG elements.

Would it not be possible to pre-caclulate and flatten the CSS onto element style attributes of the inline SVG?

SimonSapin · 2013-12-03T10:52:08Z

@graingert maybe. This only reinforces my opinion that CairoSVG and WeasyPrint should be one and the same code base :)

graingert · 2013-12-03T13:10:49Z

Although absolute and fixed positioning would be broken. It does look like CairoSVG and WeasyPrint should be one and the same.

bitdivine · 2014-10-26T20:30:32Z

The data URL approach definitely works and is indeed trivial. In Django the code is:

Define a template filter:

from base64 import b64encode
@register.filter
def svg2data_url(value):
        return "data:image/svg+xml;charset=utf-8;base64,"+b64encode(value)

Use it in a template:

<img src="{{context.svg|svg2data_url}}">

diethardsteiner · 2015-02-17T11:32:48Z

Please add inline SVG support. This will make things easier for people who do not have any Python experience and hence do not want to add just another new technology to their stack.

graingert · 2015-02-17T11:35:22Z

@SimonSapin would it be possible to use premailer to flatten all the CSS directly onto attributes of the SVGs?

SimonSapin · 2015-02-17T12:05:52Z

@diethardsteiner There is no disagreement that this feature is desired. It’s mostly a matter of "someone" doing the work.

@graingert I don’t see why premailer wouldn’t work, but I don’t see either how it helps at all with inline SVG not being supported by WeasyPrint. Note that "inline" means different things in the context of premailer (style HTML attributes instead of stylesheets with selectors) and in the context of this issue (<svg> elements in an HTML document instead of <img> or <object> elements referencing an external SVG document).

graingert · 2015-02-17T12:08:00Z

This only fixes the issue that using passing a subtree would cause.

SimonSapin · 2015-02-17T12:16:57Z

Oh, I see. Yes, I suppose we could extract a subtree, "flatten" sytelsheets into style attributes, and give that to CairoSVG. Though I’d rather have the "flattening" done by re-using WeasyPrint’s existing CSS parsing and Selector matching code than using Premailer.

diethardsteiner · 2015-02-17T12:30:55Z

@SimonSapin Ok thanks for your feedback

graingert · 2016-07-19T12:42:28Z

@SimonSapin where in the code is both the html tree and the cario context available?

SimonSapin · 2016-07-19T12:48:37Z

@graingert The cairo context for the document (as opposed to contexts for intermediate surfaces used at various points) is created in the write_* methods (such as write_pdf) of the Document class in weayprint/document.py. But by the time that code is called, layout is entirely done and the HTML tree is not kept around anymore. We could pass it through so that it’s still available there, but modifying it at that point wouldn’t affect already-done layout.

graingert · 2016-07-19T12:51:14Z

@SimonSapin is it possible to just keep hold of the SVG fragments during the layout processing? So we can at least get it working by pretending the SVG is just an embedded image?

SimonSapin · 2016-07-19T13:24:30Z

I don’t have an answer to that right now, sorry. (I’m not as involved in WeasyPrint as I used to be, so I won’t be spending a lot of time to work on this or think about how it could be done.)

What I remember is that I thought that the CSS rendering and SVG rendering really should share their style system. (The thing that takes stylesheets and a DOM-like tree, matches selectors, runs the cascade, and gives one computed values for every property for every element.) Right now they’re completely separate (and somewhat duplicated) in WeasyPrint and CairoSVG.

But last I talked about merging the code bases, @liZe didn’t like the idea :)

lutostag · 2016-12-15T21:42:13Z

This is the code we are using for our specific use-case to inline the svgs generated by angular-nvd3.

(The selector for svgs was trickier due to namespacing, but I'm sure someone could figure it out). The issue is that it doesnt account for styling information, but got us to what we needed.

+from base64 import b64encode
+from lxml import etree
+
+    def svg_embed(html):
+        """For the child of nvd3 nodes (svg) munge them into b64encoded data
+        as a workaround for https://github.com/Kozea/WeasyPrint/issues/75"""
+        root = html.root_element
+        svgs = root.findall('.//nvd3')
+        for svg in svgs:
+            child = svg.getchildren()[0]
+            encoded = b64encode(etree.tostring(child)).decode()
+            encoded_data = "data:image/svg+xml;charset=utf-8;base64," + encoded
+            encoded_child = etree.fromstring('<img src="%s"/>' % encoded_data)
+            svg.replace(child, encoded_child)
+        return html
+
-    rendered = HTML(string=html, base_url=base_url).render()
+    rendered = svg_embed(HTML(string=html, base_url=base_url)).render()

mr-katsini · 2019-03-28T08:40:43Z

@liZe is there any possibility for this?

liZe · 2019-03-28T09:28:19Z

@liZe is there any possibility for this?

Finding svg tags and rendering them as if they were embedded images seems to be somehow possible. But that's just a hack as it wouldn't handle CSS rules correctly (i.e. you would have to link stylesheets in the SVG file, not in the HTML file) and would probably introduce a lot of subtle problems that we can't imagine yet.

If anyone is interested in implementing that, I can give some advice, it's a good way to start hacking WeasyPrint.

Related to #75.

liZe · 2021-08-17T19:31:35Z

The feature has been added in version 53.0. There are lots of limitations and bugs related to this initial support, but things will improve with time.

Please try version 53, and open new issues with the specific problems you may meet!

yvess mentioned this issue Oct 30, 2013

Math (MathML and/or TeX math) #59

Open

byaka mentioned this issue Dec 9, 2015

problem with SVG, generated by Highcharts #283

Closed

sfdye mentioned this issue Oct 3, 2017

Failed to load image at data:image/svg+xml, incorrect padding #515

Closed

HipHoff mentioned this issue Dec 12, 2017

SVGs Not Fully Rendering #549

Closed

RLesur mentioned this issue Sep 19, 2018

Font-awesome icons RLesur/weasydoc#11

Open

liZe mentioned this issue Mar 25, 2019

stroke, stroke-width SVG CSS "Presentational" attributes giving "unknown property" #832

Closed

liZe mentioned this issue Apr 3, 2019

Rendering javascript generated svg #845

Closed

This was referenced May 16, 2019

Fix rendering of KaTeX output #867

Closed

Inline SVG as img tags KaTeX/KaTeX#1977

Closed

liZe mentioned this issue Jul 25, 2019

SVG width not rendering correctly #901

Closed

ptr1120 mentioned this issue Jan 6, 2020

Help needed: Rendering of SVG with embedded CSS #1021

Closed

liZe mentioned this issue Dec 1, 2020

CSS-Style "fill:" not accepted for inline svgs #1258

Closed

grewn0uille mentioned this issue Jan 12, 2021

Feature request: inline SVG support #1284

Closed

bolatuly mentioned this issue Mar 5, 2021

Failed to draw an SVG image, cairo returned CAIRO_STATUS_INVALID_MATRIX #1304

Closed

liZe added a commit that referenced this issue Mar 25, 2021

Handle inline SVG

e6bd2b3

Related to #75.

liZe closed this as completed Aug 17, 2021

TobiasNils mentioned this issue Jan 20, 2022

Admonition icons not here comwes/mkpdfs-mkdocs-plugin#43

Open

CrystalPea mentioned this issue Jul 20, 2023

Update weasyprint to render QR codes in letter alphagov/notifications-template-preview#744

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for inline SVG #75

Add support for inline SVG #75

barryvan commented Apr 24, 2013

SimonSapin commented Apr 24, 2013

barryvan commented Apr 24, 2013

graingert commented Dec 3, 2013

SimonSapin commented Dec 3, 2013

graingert commented Dec 3, 2013

bitdivine commented Oct 26, 2014

diethardsteiner commented Feb 17, 2015

graingert commented Feb 17, 2015

SimonSapin commented Feb 17, 2015

graingert commented Feb 17, 2015

SimonSapin commented Feb 17, 2015

diethardsteiner commented Feb 17, 2015

graingert commented Jul 19, 2016

SimonSapin commented Jul 19, 2016

graingert commented Jul 19, 2016

SimonSapin commented Jul 19, 2016

lutostag commented Dec 15, 2016

mr-katsini commented Mar 28, 2019

liZe commented Mar 28, 2019

liZe commented Aug 17, 2021

Add support for inline SVG #75

Add support for inline SVG #75

Comments

barryvan commented Apr 24, 2013

SimonSapin commented Apr 24, 2013

barryvan commented Apr 24, 2013

graingert commented Dec 3, 2013

SimonSapin commented Dec 3, 2013

graingert commented Dec 3, 2013

bitdivine commented Oct 26, 2014

diethardsteiner commented Feb 17, 2015

graingert commented Feb 17, 2015

SimonSapin commented Feb 17, 2015

graingert commented Feb 17, 2015

SimonSapin commented Feb 17, 2015

diethardsteiner commented Feb 17, 2015

graingert commented Jul 19, 2016

SimonSapin commented Jul 19, 2016

graingert commented Jul 19, 2016

SimonSapin commented Jul 19, 2016

lutostag commented Dec 15, 2016

mr-katsini commented Mar 28, 2019

liZe commented Mar 28, 2019

liZe commented Aug 17, 2021