How do you center an SVG icon within 'itself'?

HTML-CSS
1

Here’s my site you can see the 3x icons need to be centered. I’ve added some padding but they’re still not centered.

Is it a case of individually adding margin/padding to them?

*I say within ‘itself’ as I just changed the height/width and added some background color to match the finished challenge.

Cheers

mobile-design
mobile-design375×667 16.1 KB

original SVG 
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"><path fill="#697ED4" d="M21.6 2.4H12L9.6 0H2.4A2.39 2.39 0 00.012 2.4L0 16.8a2.4 2.4 0 002.4 2.4h19.2a2.4 2.4 0 002.4-2.4v-12a2.4 2.4 0 00-2.4-2.4z"/></svg>
2

If you mean that the three icons should be centered in relation to the .folder-card div then I suggest you concentrate on the .folder-card_bottom_row div.

3

Thanks,

In the pic above you can see the folder/document/upload icons centered within the dark navy background. I’ve moved the icons to the top left so you can see. I want them to be centered within their squares

4

You can’t do this with CSS, you’d have to edit the SVG element, particularly the viewBox attribute. That attribute defines the coordinate system for the <path> (a rectangle that goes from upper left to lower right). The bigger the rectangle, the smaller the path. The general syntax is:

viewBox="start-x start-y end-x end-y"

This would be an example how to center the folder icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -5 37 35" width="45" height="45">

You can play with the values until you get the result you want for each icon.

1 Like
5

This is great, thank you! Works perfectly.

I usually just convert SVG’s to PNG as never understood them but this definitely makes things a lot easier.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.