Unzipping exported HTML5 project corrupting SVG images


(Dean) #1

I created a clickable prototype of an application. When I try to zip it up and email to client about 80% of the SVG icons display as squares. Even icons that are part of a larger SVG image, the image looks right (text and lines) but icons are squares. Also some fonts are wrong. Two people have unzipped these files on MacBook pros, same as I have. What’s weird is I unzipped the project and it works fine for me!! Some are images and some are image fills in shapes… may or may not display, mostly not. Help!

(Mark Hunte) #2

It may be a bit hard to help without seeing the project and how it is set up.

Also tell us how you exported the project and how you zipped it up.

(Dean) #3

Sorry, I didn’t realize there were a lot of ways to do either.

To export I clicked - File/Export/Export as HTML5

I then right clicked on the folder and clicked “compress”

I would just attach the Zip file here but this client is sensitive about confidentiality.

(Mark Hunte) #4

Are you able to just make a dummy project with a couple of the problem images added in the same way you added them to the other project.

(Dean) #5

I think I may have figured it out. I exported SVGs from Sketch using font icons. I think I need to convert to outlines first. I see the squares!


It is likely the fact that other folks opening the SVGs don’t have the ‘Material-Design-Icons’ font installed on their machine.

You can include a Google Font within the ‘refs’ portion of an SVG to overcome this:

  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>

https://google.github.io/material-design-icons/#icon-font-for-the-web has more info on that specific font.

(Dean) #7

I didn’t realize SVG used live text, figured it was pure vector. Learn something new everyday.