How do you properly embed an SVG in an img element using the viewBox attribute?

Question

Ok, so I have been at this for some time now, and I am on day 3 of trying to get this to work properly with no such luck; I am a beginner web developer.

What I am essentially trying to do is to create a social media icon bar horizontally. I am trying to use svg images as the icons, I have tried using PNG images for the icons and while it works they are quite pixelated with some aliasing. I even opened the SVG images in affinity designer to resize them, then export them as PNG and the result is the aliasing I had mentioned. I want them to look sharp so I am trying to use SVG.

I used a program on a website where it essentially uses viewBox to resize the SVG how you want them for their x, y, w, h attributes, I then used the resulting code to add it to the src url in the image element, but I can not get my icons to show up in the html, and I am highly unsure what I should do in CSS to resolve this.

Here is my html code: (I have not bothered wrapping my image tags with links yet)

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/youtube-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/soundcloud-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/bandcamp-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/facebook-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
        </ul>
      </div>
    </div>

Here is my CSS:

.social-container-1 {
  background-color: black;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

enxaneta · Accepted Answer · 2020-09-10T12:38:20.183

Firstly I would like to show you how the svg file should look like:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 24" enable-background="new 0 0 72 24" width="24" height="24" xml:space="preserve">
  
  <g id="home">
    <path d='M0 0h24v24h-24z' fill='none'></path>
    <path d='M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z'></path>
  </g>

  <g id="ok">
    <path d='M24 0h24v24h-24z' fill='none'></path>
    <path d='M33 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z'></path>
  </g>

  <g id="mail">
    <path d='M48 0h24v24h-24z' fill='none'></path>
    <path d='M68 4h-16c-1.1 0-1.99.9-1.99 2l-.01 12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 4l-8 5-8-5v-2l8 5 8-5v2z'></path>
  </g>
</svg>

Please observe that inside the svg element you have 3 icons: #home #ok and #mail. The #ok icon extends in x from 24 to 48 and has a width and a height of 24.

In order to use the ok icon as an image you need to use this src value: myIcons.svg#svgView(viewBox(24,0,24,24))

The first parameter in the viewBox is the from x meaning that the content of the svg element begins at x=24 units. The second parameter in the viewBox is the from y meaning that the content of the svg element begins at y=0 units. The other 2 parameters are the width (24 units) and the height (24 units)

Please read about the viewBox attribute

When you are writing myIcons.svg#svgView(viewBox(24,0,24,24)) you are changing the viewBox attrtibute from viewBox="0 0 72 24" to viewBox(24,0,24,24). As result you are selecting only the middle part of the svg element, something like this:

If you apply the same logic for the other icons the result may be something like this:

.social-container-1 {
  background-color: gold;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(0,0,24,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(24,0,24,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(48,0,24,24))"></li>
        </ul>
      </div>
    </div>

Please read about How SVG Fragment Identifiers Work

Also please don't use spaces inside the url values: Is a URL allowed to contain a space?

Had to use firefox dev tools to work out the values for each variable, the reason why the icons weren't showing up in that div was because for the styling of the icons, as you can see I had a value of auto for height, apparently it doesn't accept a value of auto when using viewBox, just in case someone else has this issue. — Khepera, Sep 10 '20 at 17:18
Alternative 2020 way of adding (any of 5000+) SVG icons with W3C standard Custom Elements/Web Components: ```` https://iconmeister.github.io — Danny '365CSI' Engelman, Sep 24 '20 at 07:59

How do you properly embed an SVG in an img element using the viewBox attribute?

1 Answers1