CODEWITHSUNDEEP
csssvg
Santhosh Kumar
Santhosh Kumar

Reputation: 1732

Aligning SVG elements to appear center vertically and horizontally

I have an SVG element which will be reused and will be of different size. As of now, I have to adjust viewbox manually to make it appear centre. Is there is any svg solution to centre irrespective of any size.

<svg width="200" height="200" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid" fill="#000">
  <use xlink:href="#home"></use>
</svg>

<svg width="200" height="200" viewbox="0 0 200 200">
  <use xlink:href="#home"></use>
</svg>

<svg style="display:none">
  <symbol id="home">
    <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
    <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
  </symbol>
</svg>

Also refer the fiddle

Upvotes: 3

Views: 12843

Answers (2)

satyajit rout
satyajit rout

Reputation: 1651

 

svg{
  margin: auto;
 }
.content {
  width:200px;
  height:200px;
  border:1px solid #ececec;
  display:inline-flex;
  align-items:center;
}
<div class="content">
<svg width="60" height="60" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 <div class="box">
<svg width="20" height="20" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 
 
 
 
 
 
 
 
 <svg style="display:none;">
 <symbol id="home" >
           <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
            <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
        </symbol>
        </svg>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274225

Why not simply adjust the viewbox so that the icon take the full space of the svg then you control its size using height/width and for the alignement you use another div.

So you can easily control the size of the icon and the size of the box and center the SVG using any common techniques (I used flex in this case) and you don't have to change the viewbox each time:

svg {
 border:1px solid;
}

.box {
  width:200px;
  height:200px;
  border:1px solid red;
  display:inline-flex;
  vertical-align:top;
  justify-content:center;
  align-items:center;
}
<div class="box">
<svg width="50" height="50" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 <div class="box">
<svg width="20" height="20" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 
 
 
 
 
 
 
 
 <svg style="display:none;">
 <symbol id="home" >
           <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
            <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
        </symbol>
        </svg>

Upvotes: 4

Related Questions