htmlcssimagesvgviewbox

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

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;
}
Solution

  • 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:

    enter image description here

    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?