CODEWITHSUNDEEP
angularjssvg
Rhys
Rhys

Reputation: 489

ng-include on SVG's but including dimensions

I like this technique, but as you all know, one of the great things about svg graphics is that you can re-size and re-use the same file. Is it possible to add a size variable to ng-include?

eg:

<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50">

Upvotes: 1

Views: 967

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The answer is to not specify a width or height in your SVG. Or if you do, make sure they are both set to "100%". Then as long as your SVG has a suitable viewBox attribute, it will scale to whatever size you make its parent.

.small {
  width: 50px;
  height: 50px;
}

.large {
  width: 150px;
  height: 150px;
}
<div class="small">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>
</div>


<div class="large">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>
</div>

Note that the two SVGs in the example above are identical.

Upvotes: 3

Related Questions