Embedded (base64) images in SVG are not rendered #14348

astefanutti · 2016-06-10T06:47:18Z

Which version of PhantomJS are you using? Tip: run phantomjs --version.

2.2.0-development

What steps will reproduce the problem?

Run phantomjs examples/rasterize.js test.html test.pdf
with the following test.html document:

<html>
  <body>
    <img src="test.svg"/>
  </body>
</html>

and the following test.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="68px" width="61px" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <image xlink:href="data:image/gif;base64,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" x="0" y="0" height="68px" width="61px"/>
</svg>

The embedded image element does not render when the page is exported to PDF or PNG while it renders fine when test.html is opened in a Web browser (tested with Safari and Chrome).

Which operating system are you using?

Mac OS X
Did you use binary PhantomJS or did you compile it from source?

Compiled from source @6090f54
Please provide any additional information below.

Surprisingly, the embedded image does render with the following page:
```
<html>
  <body>
    <img src="test.svg"/>
    <object data="test.svg"/>
  </body>
</html>
```
That is the corresponding image is rendered twice.

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

robinfhu · 2016-08-17T19:06:33Z

+1. I encountered the same issue using PhantomJS build 2.1.1, on Mac OSX.

abulgatz · 2016-12-28T03:05:30Z

Exact same problem. SVG renders fine in chrome, and if I use phantomjs to go straight from SVG to PNG, the embedded base64 encoded png renders fine. But If I embed the SVG in an HTML page and attempt to go from HTML to PDF, the SVG is missing its embedded PNG background.

OS X 10.11 with phantomJS 2.1.1

GoldHornKing · 2017-02-23T19:17:11Z

+1

GoldHornKing · 2017-02-23T19:35:12Z

PDF from this HTML will get svg rendered

<html>
  <body>
    <object data="test.svg"/>
  </body>
</html>

PDF from this HTML will not have image

<html>
  <body>
    <img src="test.svg"/>
  </body>
</html>

PDF from this HTML will have two images

<html>
  <body>
    <img src="test.svg"/>
    <object data="test.svg"/>
  </body>
</html>

kashesandr · 2017-09-21T13:01:59Z

Phantomjs doesn't render element with background like this:
domElement.setAttribute('style', "background: transparent url(\"data:image/svg+xml;utf8,<svg...")

MacOs Sierra 10.12.6
phantomjs 2.1.1

stale · 2019-12-29T07:50:40Z

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

stefjoosten · 2023-03-06T18:57:44Z

According to Mozilla's SVG documentation, the data URL's in SVG only support JPEG, PNG and other SVG's , so I would expect xlink:href="data:image/gif... not to work.

astefanutti mentioned this issue Jun 10, 2016

Decktape does not render embedded images in SVGs astefanutti/decktape#37

Closed

stale bot added the stale label Dec 26, 2019

stale bot closed this as completed Dec 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Embedded (base64) images in SVG are not rendered #14348

Embedded (base64) images in SVG are not rendered #14348

astefanutti commented Jun 10, 2016

robinfhu commented Aug 17, 2016

abulgatz commented Dec 28, 2016 •

edited

Loading

GoldHornKing commented Feb 23, 2017

GoldHornKing commented Feb 23, 2017 •

edited

Loading

kashesandr commented Sep 21, 2017 •

edited

Loading

stale bot commented Dec 29, 2019

stefjoosten commented Mar 6, 2023

Embedded (base64) images in SVG are not rendered #14348

Embedded (base64) images in SVG are not rendered #14348

Comments

astefanutti commented Jun 10, 2016

robinfhu commented Aug 17, 2016

abulgatz commented Dec 28, 2016 • edited Loading

GoldHornKing commented Feb 23, 2017

GoldHornKing commented Feb 23, 2017 • edited Loading

kashesandr commented Sep 21, 2017 • edited Loading

stale bot commented Dec 29, 2019

stefjoosten commented Mar 6, 2023

abulgatz commented Dec 28, 2016 •

edited

Loading

GoldHornKing commented Feb 23, 2017 •

edited

Loading

kashesandr commented Sep 21, 2017 •

edited

Loading