Stanford Stanford - 3 months ago 18
Sass (Sass) Question

Align SVG to the center of a div in sass

I'm having trouble aligning my SVGs to the center of the circle, how should I go about doing it?

I've tried using imgs in place of the svgs but the quality suffers greatly. Also, I've tried the answers here on stack overflow and tried using the solutions but to no avail.

I have this:
enter image description here

Want this:
enter image description here

HTML

<div class="topics-container">
<div class="row1">
<div class="topic">
<div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div>
<div class="topic-name">Cybersecurity and Social Engineering</div>
</div>

<div class="topic">
<div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div>
<div class="topic-name">Virtual Reality</div>
</div>
.
.
.

</div>
<div class="row2">
<div class="topic">
.
.
.
</div>
.
.
.
</div>
</div>


SASS:

.row1
background: blue
+display(flex)
+align-items(center)


.row2
background: red
+display(flex)
+align-items(center)

.topic
display: block
margin: auto

[class^="icon-"]
+size(100px)
background: green
border-radius: 50%

Answer

Thanks for all your help, I figured out a solution, the svg file was not aligned to the center, so I had to do that in illustrator.

Here are the steps:

  1. Create a new illustrator file, 100px x 100px
  2. Dragged the svg into the white space
  3. Pressed transform, set the x and y to 50px

Pressed transform, set the x and y to 50px 4. Saved as .svg

enter image description here

  1. Connected the .svg to the code
  2. Repeat, Voila

Results: enter image description here

Code I used: SASS:

.row1
  +display(flex)
  +align-items(center)

.row2
  padding-top: 150px
  +display(flex)
  +align-items(center)
  padding-bottom: 100px


.topic
  display: block
  margin: auto
  background: white

  [class^="icon-"]
  +size(150px)
  border-radius: 50%

.topic-name
  font-size: 20px
  font-style: bold
  text-align: center

HTML: (same as question)

<div class="topics-container">
 <div class="row1">
        <div class="topic">
            <div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Cybersecurity and Social Engineering</div>
        </div>

        <div class="topic">
            <div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Virtual Reality</div>
        </div>
        .
        .
        .

 </div>
 <div class="row2"> 
        <div class="topic">
        .
        .
        .
        </div>
        .
        .
        .
 </div>
</div>

My SVG File:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path d="M68.9,25c0,0-0.1,0-0.1,0c-0.5,0.1-0.8,0.5-0.8,1c0,1.9-0.9,3-2.5,4s-4,1.9-6.4,2.9s-4.9,2.3-6.8,4.4c-1.8,1.9-3,4.5-3.2,8
    c-1.8-0.1-2.9-0.7-4.1-1.4c-1.5-0.8-3.2-1.7-6-1.7c-1.7,0-3.3,1-4.9,2.5s-3.1,3.5-4.4,5.9C27,55.5,25,61.5,25,66.8
    c0,2.2,0.5,4.2,1.6,5.7c1,1.5,2.6,2.5,4.4,2.5c4.8,0,8.3-2.5,11.2-4.8s5.2-4.4,7.8-4.4s4.8,2,7.8,4.4C60.7,72.5,64.2,75,69,75
    c1.8,0,3.4-1,4.4-2.5c1-1.5,1.6-3.5,1.6-5.7c0-5.4-2-11.3-4.7-16.1c-1.3-2.4-2.8-4.4-4.4-5.9s-3.2-2.5-4.9-2.5c-2.8,0-4.5,0.9-6,1.7
    c-1.2,0.6-2.2,1.2-3.9,1.3c0.2-3,1.2-5,2.6-6.6c1.6-1.7,3.8-2.9,6.2-3.9c2.3-1,4.7-1.8,6.7-3.1s3.4-3.1,3.4-5.8c0-0.6-0.4-1-1-1.1
    C69,25,68.9,25,68.9,25z M39,44.4c2.4,0,3.6,0.6,5,1.4s3.2,1.7,6,1.7c0.1,0,0.2,0,0.3,0c0,0,0,0,0,0c2.6-0.1,4.3-0.9,5.7-1.7
    c1.5-0.8,2.6-1.4,5-1.4c0.9,0,2.2,0.6,3.5,1.9c1.4,1.3,2.8,3.2,4,5.4c2.5,4.5,4.4,10.2,4.4,15c0,1.9-0.5,3.5-1.2,4.5
    C71.1,72.4,70.2,73,69,73c-4.2,0-7.2-2.1-10-4.4c-2.8-2.3-5.5-4.8-9-4.8s-6.2,2.5-9,4.8S35.2,73,31,73c-1.2,0-2.1-0.5-2.8-1.6
    c-0.7-1.1-1.2-2.7-1.2-4.5c0-4.8,1.9-10.6,4.4-15c1.3-2.2,2.7-4.1,4-5.4C36.8,45,38.1,44.4,39,44.4z M62,51.5c-1.1,0-2,0.9-2,2
    s0.9,2,2,2s2-0.9,2-2S63.1,51.5,62,51.5z M37,52.6v3.1h-3v3.1h3v3.1h3v-3.1h3v-3.1h-3v-3.1H37z M58,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2
    s2-0.9,2-2S59.1,55.6,58,55.6z M66,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S67.1,55.6,66,55.6z M62,59.7c-1.1,0-2,0.9-2,2
    c0,1.1,0.9,2,2,2s2-0.9,2-2C64,60.6,63.1,59.7,62,59.7z"/>
</svg>