'Invisible' shapes appear when importing

[justincpollard]

Hi Josh,

I'm following up re the below issues because I have new information:

https://github.com/google/material-design-icons/issues/32 https://github.com/google/material-design-icons/issues/31 https://github.com/google/material-design-icons/issues/30

I've been in touch with Fontastic.me's Vincent Le Moign, and his response to the issue is pasted below. He's also asked if I could put you in touch with him so you two can discuss a solution in-depth. Vincent's email is vincent.lemoign@gmail.com. Feel free to CC me (jp@zumper.com) if needed:

All the icons which cause problems have a transparent shape that you don’t normally see, but that cause a problem when you import it. (as the shape really exists even if invisible)

For example, I’ve fixed the magnifier icon you mentioned, and you can see that it’s imported without problem with Fontastic below:

I’ve attached to this email the original magnifier icon, and the fixed one.

Have a look and try to import, you’ll see.

This is actually a classic problem, and I detail how to fix in the Fontastic FAQ: http://fontastic.me/faq

[webalys]

Hi,

I'm the Fontastic creator, and here is the SVG code that demonstrate the problem with invisible shapes in the SVG icons.

Cannot add a SVG file to the comment, so I paste the SVG code

---- SVG ICON WITH INVISIBLE SHAPE THAT TRIGGER PROBLEM ---

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27c.98-1.14 1.57-2.62 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49-4.99-5zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z"/>
    <path d="M0 0h24v24h-24z" fill="none"/>
</svg>

--- SAME SVG ICON FIXED, AFTER REMOVING INVISIBLE SHAPE --- (exported from Illustrator)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M15.5,14h-0.79l-0.28-0.27C15.41,12.59,16,11.11,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5S5.91,16,9.5,16
    c1.61,0,3.09-0.59,4.23-1.57L14,14.71v0.79l5,4.99L20.49,19L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5
    S11.99,14,9.5,14z"/>
</svg>

Hope that helps!

[jestelle]

Awesome. Thanks for digging into this guys.

That empty path you find in all the SVGs is there for a reason, but maybe a minor one that we can try to address in another way. That empty path is basically the border of the icon.

It is left in, because it is helpful for designers when they drop these shapes into another document. Leaving that path in, allows the icon to line up along the gridlines that it should be aligned to, and not alight to the optical edge of the artwork.

However, for any production use of the SVGs, that path can certainly be dropped.

Ideas to consider, and I'd love to hear opinions on these: (1) remove these extra paths all together

• we'll consider this, but we need to find another way to provide the assets conveniently for designers with those extra paths

(2) create one big SVG with all the icons in a grid, including the extra paths, for designers to use as a stickersheet

• if we have this, we might be more inclined to drop the extra paths from the primary assets

(3) create a script that can remove those extra paths

• this should be relatively easy to do, as this particular extra path can be fairly easily machine identified

Other approaches of dealing with this?

If anyone wants to help with (2) or (3) we'd love the help. Note: most of the resources in this repo are automatically generated using various scripts and processes, so the most helpful contributions are those in the form of scripts that we can use to post-process these resources rather than modifying the resources themselves. That way when we regenerate things, we can reapply any post processesing, instead of overwriting some improvement made only here.

Thanks all.

[webalys]

Thanks for this documented answer!

So you mean that you kept the invisible shapes it for designers who drop them in a vector graphic app like Illustrator or Sketch?

Because for a developer/designer who embed them in a website or app, the SVG viewport size will define the dimension of the icons, and it should align correctly. Without needing these invisible shapes. Am I correct here?

Actually, the designer who drop the icon in Illustrator, then select it and apply a color will suddenly see the icon becoming a filled square, as the invisible shape become colored and cover the whole icon.

I'm just a designer, and I'm not on a technical side, but it doesn't seems right to me that a shape is used to define what is called an artboard in Illustrator, or a viewport in SVG. A shape should be used for drawing purpose, not for this use I think. Does that make sense?

About creating a script, I'm sorry but as a designer I cannot do it. The only solution for me would be to open each icon and remove he invisible shape.

Thanks,

[jestelle]

Your understanding is correct.

I'll keep pursuing this and see if we can find a better solution.

Cheers, Josh

[webalys]

Cool. Let me know when you've fixed it, that I can import them to Fontastic.

By the way, I'm the creator of huge icons libraries like this one: http://www.streamlineicons.com

My problem: it take days to convert these thousands SVG icons manually to PDF or PNG, and i'm not a developer so i don;t know how to script that. And with my new collection coming soon I will have 15,000 icons to convert!

You've mentioned you use scripts for conversion: are they open source, or available to use somewhere?

Thanks, Vincent

[justincpollard]

@jestelle @webalys I really appreciate you both looking into this!

[jestelle]

We may eventually release some of the tools we've been using for our assets, but it may take us some time before we do that.

In the meantime, you might look at rsvg-convert, which is the tool we've used for converting SVG to PNG. It may require some comfort with the command line to use though.

[webalys]

@jestelle Thanks for the tip about rsvg-convert, and hope you will release these script on day (I'm considering using Applescript too)

@justincpollard Thanks to you for pushing for it, that will make a lot of Fontastic users happy :-)

[jestelle]

Closing this out. Please give the production SVGs a try and let me know if you have any issues.

[justincpollard]

Hey @jestelle

Thanks for working on this! Below are screenshots of what I'm seeing now for map, settings, and favorite outline. Favorite (the filled in heart) looks good!

[jestelle]

Hey @justincpollard I believe you may be running into the issue described in #22

SVG paths can have numbers formatted like:

.8.1.2.3

which is the equivalent of

.8 .1 .2 .3

But our optimization strips out those unnecessary spaces.

It seems some tools do not parse this correctly though.

That's my guess of what you're running into.

[justincpollard]

Thanks @jestelle!

@webalys are you able to look into Josh's comment above?

[webalys]

@jestelle @justincpollard We'll check to this text spacing problem and we'll get back to you soon

[justincpollard]

@webalys Just wondering if you've had an opportunity to look into this, Vincent?

[jestelle]

Closing this out, as from the asset repo perspective, we don't have anything left to do to resolve this.

[justincpollard]

Thanks for taking a look at this, @jestelle!

[AndyOGo]

How can I download an SVG without this invisible shape from https://material.io/icons?