: Exporting SVG Icons With a Bounding Box 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 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)
More posts by @Connie430
2 Comments
Sorted by latest first Latest Oldest Best
If your icons are only one color I would consider making the icons into a font with glyphter.com
This makes for easily changing :hover-colors etc.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.