0

I´m trying to center a svg inside a div, how to do it?

div{
    width: 50px;
    height: 70px;
    background-size: 50px 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #80808026;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A");
}
<div></div>
SilverSurfer
  • 4,281
  • 6
  • 24
  • 50

2 Answers2

3

You need to fix the viewBox of your <svg>.

Setting it to 0 0 117 95 will make your path take the full viewport

div{
    width: 50px;
    height: 70px;
    background-size: 50px 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #80808026;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A");
}
<div></div>

You can now control better its size through CSS: 

div{
    width: 50px;
    height: 70px;
    background-size: 35px 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #80808026;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A");
}
<div></div>

But of course, you could also set it directly to a value that will only center it, for instance -41.5 -52.5 200 200 will do

div{
    width: 50px;
    height: 70px;
    background-size: 50px 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #80808026;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-41.5 -52.5 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A");
}
<div></div>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • How did you find the properly viewbox in the last example? You made it by eye or there are tools for that? – SilverSurfer Aug 28 '19 at 11:39
  • 1
    The SVGGraphicsElement interface has a getBBox() method. See [this QA](https://stackoverflow.com/questions/29002472/find-svg-viewbox-that-trim-whitespace-around/29004579#29004579) for instance. I used this, then basic arithmetic (graphic-width / 2) - (viewport-width / 2). – Kaiido Aug 28 '19 at 11:44
1

Change the background position like this:

div{
    width: 50px;
    height: 70px;
    background-size: 50px 70px;
    background-position: 10px 13px;
    background-repeat: no-repeat;
    background-color: #80808026;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A");
}
<div></div>

The problem is that the SVG is not just the image you want to center, but also some transparent parts around it. I would remake the SVG and clear all the transparent parts so that the SVG just contains that shape you want. It will be way easier to center (just use background-position: center center;)

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45