Copy as SVG

Question

Copy as SVG

grimen opened this issue 9 years ago · comments

Would be neat to be able to copy an icon as SVG.

Jonas Grimfelt · Answer 1 · Tue Dec 08 2015 08:58:58 GMT+0800 (China Standard Time)

Relevant: Client-side string compression library that could be used for fast compression of icon SVG markup, and fast uncompression on copy: https://github.com/pieroxy/lz-string

Thomas Park · Answer 2 · Tue Dec 08 2015 11:10:24 GMT+0800 (China Standard Time)

This should be doable. All of the font libraries have SVG. The main hurdle I see is material-design-icons, where files are organized into different category folders. Might be tricky to find the relevant SVG file to grab the markup.

It didn't cross my mind that copying SVG would be useful. Curious what your use case is for it?

Jonas Grimfelt · Answer 3 · Tue Dec 15 2015 05:18:35 GMT+0800 (China Standard Time)

@thomaspark Yes. Well I in a few occasions prefer SVG, especially when hacking around - but specific use cases are multi-color and animated icons. I also recently posted about GlyphSearch in a active developer forum and the biggest critique against Webfonts - and implicitly the lack of support in GlyphSearch - was that many prefer SVG for various reasons in modern browsers nowadays. There seem to be a ~50/50 opinion on this one.

A few articles on the topic:

I am interested in looking into adding the support, but wanted to anchor it first.

Jonas Grimfelt · Answer 4 · Thu Dec 31 2015 21:40:49 GMT+0800 (China Standard Time)

@thomaspark Did a first pass of a little JS script that when needed load and convert SVG Font-Face/Glyphs to SVG Paths, and ability to lookup icon by unicode value:

As you mention material-design-icons is a special case (which I will be looking into more), but for the ~40-50 icon font sets i listed that's the only project that have this problem I think it would be a great feature, especially as it is mostly a plugin - only need to add the copy-button for SVG that calls the svg-path-by-unicode method.

Will try to figure out address material-design-icons-issue before I create a pull request.

Jonas Grimfelt · Answer 5 · Thu Dec 31 2015 22:26:43 GMT+0800 (China Standard Time)

I tried ttf2svg (https://github.com/qdsang/ttf2svg) for material-design-icons and it worked perfectly fine. I suggest adding it to postinstall build step of bower.json (a best practice in these cases for bower and npm).

Picture or it didn't happen:

Sidenote: In fact I would suggest moving away from bower in favor of npm as that is the trend I see happening lately, everything is ending up in both places but the vision of npm is more grand.

Jonas Grimfelt · Answer 6 · Sat Jan 02 2016 19:16:32 GMT+0800 (China Standard Time)

Repository for SVG conversion example/sandbox: https://github.com/grimen/svg-fontglyphs2svg

Jonas Grimfelt · Answer 7 · Wed Jan 06 2016 13:00:24 GMT+0800 (China Standard Time)

For the record:

Issue: google/material-design-icons#149
Pull Request: google/material-design-icons#282

Should be merged soon so material-design-icons will have an SVG font bundled soon.