Tip: Sketch to Sparkle SVG

Tip: When using the Sketch app and dragging into Sparkle as an SVG Yes drag and drop SVG and not having to use Sketch Artboard with the Sparkle Sketch Plugin etc

When you create you mega graphic in Sketch, group the layers and name the group, lets say ‘menu’ in this example. This group naming will be used by Sketch and Sparkle for the SVG name etc,

Drag from the Sketch ‘export’ panel and straight into Sparkle, no need to use an Artboard or the Sparkle plugin etc.

Best,
Scott

5 Likes

Thank you for this neat trick. Works great! If fonts are part of the group they have to be converted to outlines before dragging into Sparkle.

Thanks for that, it’s a handy little tip.

This is so strange, but if the font is installed in Sparkle that Sketch is using in the group graphic, then this gets imported ok. Just did a simple test and it worked! How is this even possible, and how is this working!!

I’ll have to test further on this though!!

Happy days!

Best,
Scott

Screenshot of Sparkle (18-06-2020, 08-59-37)

SVG graphics that contain text can be output to include or exclude the font file. Clearly, if the font file is embedded it will make the SVG file size larger - it may also cause copyright issues. Most SVG’s will simply reference the font, so if the font is available on your system, the SVG will display correctly. If the font isn’t on the system, the font may display incorrectly or the font may be substituted. To get total font independence, it’s better to convert text to outline or curves (as it is sometimes known) before exporting the SVG.

Yes, I would always convert, but it was interesting how it referenced the font etc. I have never thought about svg’s referencing fonts before, so it took me by surprise!

I’ve learnt something today, I didn’t realise that there is a type of font which is SVG font. Limited browser support though I think.

Pretty cool fonts though, the ones I’ve seen.

Best,
Scott