1

I am a front end developer creating a rather large icon set for a site, I've settled on using Grumpicon because it provides the deep layer of support I need as well as allowing me to do some size manipulations with my CSS code.

The issue though is that my SVG icons are not all exactly the same shape and this means different widths and heights would have to be applied for each one.

Take the Facebook and Twitter logos for example, as a png icon set I would export each one out of Photoshop with a bounding box of 30x30px. Even though the shapes of the logos themselves are different, because they sit in a transparent box of 30x30 the browser will see them as the same size.

Is there a way to do this with SVG? E.g have a Twitter and Facebook logo both sitting in the center of a 30x30 box, even though neither are exactly 30x30 in size.

(P.S I use Adobe Assets to extract my SVG icons, not sure if there is something built in there that could help me)

  • There should be a setting inside of your software exporter to do this. But if you want to learn in terms of code, this article is great aid – Zach Saucier Sep 15 '16 at 17:51
1

If your icons are only one color I would consider making the icons into a font with https://glyphter.com

This makes for easily changing :hover-colors etc.

  • Hello and welcome to GD.SE! If you have any questions about how the site works, have a look at the help center or feel free to ping one of us in Graphic Design Chat once your reputation reaches 20. Keep contributing and enjoy the site! – Vicki Jan 15 '17 at 3:17
0

SVG has a document / viewport size. You can easily configure an SVG to have 30x30 (px/mm/whatever unit you wish) size and have the icons contents sitting in the middle. That way all of your icons will be aligned.

Two options to get what you want:

  • You can use Inkscape (a great, free and open-source program) to edit SVGs. Open your existing SVG icon, press Shift + Ctrl + D to edit the document size and then select and move the contents of the icon unit they are aligned to your liking. Note that you can use the "Align and Distribute" (Shift + Ctrl + A) panel to center objects relative to the page. Finally, save the result as a "Plain SVG".

  • Edit the SVG file directly in a text editor (it's XML after all). Adjust the width, height and viewBox properties of the root <svg ...> tag. Note that this only changes the document size but doesn't align the contents.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.