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)

Improve this question
1
  • 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, 2016 at 17:51

2 Answers 2

Reset to default
1

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.

Improve this answer
1
  • Thanks for previous answer. Inkscape Shift+Ctrl+D brought me to edit page, where I was able to fit border of my svg picture to size of selected object. That was easy and great!
    – Evgeny Pogorelov
    Dec 28, 2019 at 19:02
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.

Improve this answer
1
  • 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, 2017 at 3:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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