Image not showing in Chrome

I'm new to Hype and currently experimenting with the demo. I'm having an issue with an image (SVG) not appearing in Google Chrome, both during Preview and Export. The image appears fine in Safari, and shows when I export as a video, but is missing in Chrome.

Here's a screencast showing Chrome vs. Safari: Recordit: Record screencasts fast & free! with GIF Support!

Mac OS running the latest Google Chrome (95.0.x)

Are you able to post a zip of the .hype document (or at least the .svg file)? That might help figure out what is going on. Looking at the screencast it appears the .svg likely has embedded bitmap data (so isn't really a vector at all). It could be that there's a Chrome bug in displaying this type of SVG; it wouldn't surprise me if this is a new Chrome rendering bug. We can probably help in filing it if that turns out to be the case.

The first workaround I'd try is unchecking Use WebKit graphics acceleration in the Document Inspector and see if that changes anything.

Hi Jonathan, I appreciate the response. I tried disabling "Use WebKit graphics acceleration" and the issue is not yet resolved.

Here's the SVG: (2.3 MB)

I also loaded the HTML5 export and project here:


I think your problem is in the SVG file.

Currently, it has a huge PNG image nested inside its <def> section but not displayed beyond that. This doesn't make a lot of sense. Firstly, there is no reason to insert a PNG into an SVG that has no additional vector elements. It is also unnecessary to insert it between <def> tags.

When I extract out this PNG file and use it instead of the SVG, your Hype project is displayed fine in all browsers.

Here is the extracted PNG file:


I really appreciate your helpful response. This is now resolved...and I also gained some useful knowledge.


I filed an issue against Chrome here: