SVG sprites: per-instance preserveAspectRatio

Question

Is there any way to set the value of preserveAspectRatio for SVG sprites on a per-instance basis using CSS, HTML, or some other method (besides JavaScript)?

For example (none of these appear to work):

<!-- inline html on <svg> -->
<svg preserveAspectRatio="xMinYMin">
  <use xlink:href="/svg/icon.svg">
</svg>

.

<!-- inline html on <use> -->
<svg>
  <use xlink:href="/svg/icon.svg" preserveAspectRatio="xMinYMin">
</svg>

.

<!-- inline css nested in <svg> -->
<svg>
  <style>svg { preserveAspectRatio: xMinYMin; }</style>
  <use xlink:href="/svg/icon.svg">
</svg>

.

<!-- inline css nested in <use> -->
<svg>
  <use xlink:href="/svg/icon.svg">
    <style>svg { preserveAspectRatio: xMinYMin; }</style>
  </use>
</svg>

.

<!-- head/external css -->
<style>
  .icon,
  .icon svg {
    preserveAspectRatio: xMinYMin;
  }
</style>

<svg class="icon">
  <use xlink:href="/svg/icon.svg">
</svg>

elements can't point to complete SVG files in most UAs currently. I can show you how to do this via an element if that's any use. — Robert Longson, Jun 11 '18 at 11:13
@RobertLongson - thanks for responding; sure, seeing the approach might be helpful. — cantera, Jun 11 '18 at 11:37

score 2 · Accepted Answer · answered Jun 11 '18 at 11:44

2

In SVG 1.1 you can only use <image> elements to refer to complete files. SVG 2 relaxes this so that <use> elements can point to complete files but I'm not sure any UAs have implemented this.

For image elements you'd do this...

<svg>
  <image width="100" height="100" xlink:href="/svg/icon.svg#svgView(preserveAspectRatio(none slice))">
</svg>

In SVG 1.1 width and height are mandatory for images. The svgView syntax is documented here

answered Jun 11 '18 at 11:44

Robert Longson

118,664
26
252
242

That's great to know, thanks. I'll watch for browser support. – cantera Jun 11 '18 at 12:54

SVG sprites: per-instance preserveAspectRatio

1 Answers1