CODEWITHSUNDEEP
svgviewbox
Eric Johnson
Eric Johnson

Reputation: 1144

SVG is generating a viewbox even though there isn't one specified

I'm trying to create an SVG play button that is only the size of the button itself, but it seems that there is some kind of viewbox being auto-generated. This phantom viewbox isn't even the same dimensions as the the play button and seems to be a 2:1 ratio.

#play-button {
  border: 1px dashed gray;
}
<svg id="play-button">
<style type="text/css">
  .st0{fill:none;stroke:#010101;stroke-miterlimit:10;}
  .st1{fill:#010101;}
</style>
<circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3"/>
<polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 "/>
</svg>

How can I size the viewbox to the size of the SVG without specifying a viewBox or a height/width?

Upvotes: 1

Views: 565

Answers (3)

Robert Longson
Robert Longson

Reputation: 123995

The outer SVG element is a replaced element. If you don't provide anything to go on for size you'll get the default width which is 300px and the default height which is 50% of the width so if you've not supplied a width value either, that ends up being 150px.

There are a number of ways to indicate the height and width you want. The most obvious would be height and width attributes or CSS properties of the same name but you can also use a viewBox attribute to define a width and height.

Upvotes: 5

henry
henry

Reputation: 4385

@RobertLongson's answer explains why this is happening. Here are some things you can do about it:

Your circle's r="29.3" does in effect "specify a height/width" in the markup. If you can put a value there, I would imagine you actually can the same value in the svg's width or height instead. Here's a different approach you could take with that in mind. It does require a viewbox but one that doesn't change: 0 0 100 100 just lets us use percentage values for the polygon's points. To calculate them, I did yourpointvalue/yourradius (e.g. 21.9/58.6). Using a border on the svg instead of a circle element makes this lighter weight and makes the markup easier to read. I've specified the width in the CSS, but it could also be inline; you could also only specify the height, or have it relative to a parent, etc etc.

(If you check the svg with your browser's inspector, you'll see it's the same width and height as the circle)

#play-button {
  fill: #010101;
  border: 1px solid #000;
  border-radius: 50%;
  display: block;
  
  /* specify a width or a height either here or inline */
  width: 58.6px;
}
<svg id="play-button" viewbox="0 0 100 100">
  <polygon points="37.3,26.8 79.5,50 37.3,73.2" />
</svg>

If you really can't use viewbox, width, or height, and need to keep all that markup, you can achieve this with javascript. This is adapted from a solution by @Almis (but see @PaulLeBeau's take on the issue). The overflow: visible is necessary because the circle's stroke extends a little beyond the bounds of the svg. (Eventually we may be able to specify where a stroke is drawn, but not yet.)

var playButton = document.getElementById('play-button');
var boundingRect = document.getElementById('button-border').getBoundingClientRect();
playButton.style.height = boundingRect.height + 'px';
playButton.style.width = boundingRect.width + 'px';
#play-button {
  border: 1px dashed gray;
  overflow: visible; /* added */
}
<svg id="play-button">
  <style type="text/css">
    .st0 {
      fill: none;
      stroke: #010101;
      stroke-miterlimit: 10;
    }
    .st1 {
      fill: #010101;
    }
  </style>
  <circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3" />
  <polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 " />
</svg>

Upvotes: 1

Eric Johnson
Eric Johnson

Reputation: 1144

It looks like the answer is that the default size of an SVG is 300x150, which seems bizarre to me.

If you don't want that sizing (and you probably shouldn't rely on that default) you have to specify the size as detailed in this CSS Tricks article: https://css-tricks.com/scale-svg/

Upvotes: 0

Related Questions