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!
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.
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.
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.
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!
1 Like
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:
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>
https://google.github.io/material-design-icons/#icon-font-for-the-web has more info on that specific font.
2 Likes
I didn’t realize SVG used live text, figured it was pure vector. Learn something new everyday.