Bug 39059 - canvas drawImage does not render SVG with embedded images correctly
: canvas drawImage does not render SVG with embedded images correctly
Status: NEW
Product: WebKit
Classification: Unclassified
Component: SVG
: 528+ (Nightly build)
: Macintosh Intel OS X 10.5
: P2 Normal
Assigned To: Nobody
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-05-13 06:31 PDT by Justin Cormack
Modified: 2016-10-12 10:41 PDT (History)
7 users (show)

See Also:


Attachments
simple svg file with embedded image (960 bytes, image/svg+xml)
2010-05-13 06:31 PDT, Justin Cormack
no flags Details
file that loads the svg file into canvas, renders without bitmap (410 bytes, text/html)
2010-05-13 06:32 PDT, Justin Cormack
no flags Details
Test case (447 bytes, text/html)
2014-05-12 05:42 PDT, Dirk Schulze
no flags Details
test case (working) - wait for sub-resources (730 bytes, text/html)
2016-10-12 10:14 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Justin Cormack 2010-05-13 06:31:54 PDT
Created attachment 55968 [details]
simple svg file with embedded image

If you load an SVG image into a canvas using drawImage(), it does not draw any <image> items that are in the SVG file.

Example included - 2 files, 1 SVG file which renders correctly (3 circles and a red bitmap blob), plus Javascript that loads that image into canvas and does not show the bitmap.
Comment 1 Justin Cormack 2010-05-13 06:32:42 PDT
Created attachment 55969 [details]
file that loads the svg file into canvas, renders without bitmap
Comment 2 Dirk Schulze 2014-05-12 05:42:31 PDT
Created attachment 231289 [details]
Test case

I think this might be a duplicate of other bugs where an SVG image doesn't load embedded images.
Comment 3 Dirk Schulze 2016-10-12 05:51:27 PDT
The embedded image gets rendered on reloading the document. I am not sure if the embedded image might not be encoded in time for the onload event. I also don't know if onload requires images to be encoded and ready for rendering. But how else would the user know if the SVG is ready to render?
Comment 4 Said Abou-Hallawa 2016-10-12 10:14:44 PDT
Created attachment 291366 [details]
test case (working) - wait for sub-resources
Comment 5 Said Abou-Hallawa 2016-10-12 10:41:47 PDT
(In reply to comment #3)
> The embedded image gets rendered on reloading the document. I am not sure if
> the embedded image might not be encoded in time for the onload event. I also
> don't know if onload requires images to be encoded and ready for rendering.
> But how else would the user know if the SVG is ready to render?

I added a new test case where it waits for 100ms after onLoad() event to ensure the sub-resources are loaded/decoded before drawing the image to the canvas. Of course this will not be a reliable way to fix the issue if the data url sub-resource is big or the hardware is slow.

The data url image is the only exception to be allowed as a sub-resource in an SVG. No loading from network is involved since all the data are loaded with the SVG itself. The only overhead is decoding the the data url to an image.

The sub-resources can also be nested if the data url image is an SVG image which has a data url image.