CODEWITHSUNDEEP
csssvgscalingico
Wolfer
Wolfer

Reputation: 560

Multiple size/versions of an image in SVG

Is it possible to embed multiple images in SVG file to achieve similar effect like with ICO file?

In case of ICO, the file contains several versions/sizes of an image, so the smaller ones can omit some details or have use ratios which may render the scaled down image more readable.

Edit

I am not interested in any particular application, and I intentionally do not take into account for what ICO format was intended (used only as an example).

For further discussion lets use Applications-database.svg, witch contains four different images, as an example:

enter image description here (original size/ration).

enter image description here (scaled).

The picture on the right contains less details, and has different proportions, but is much more readable when scaled down:

enter image description here

However the Applications-database.svg does not switch between individual pictures automatically and only the biggest and the most detail image is normally visible.

So the question is: Can I with CSS/SVG hide/show different image (maybe <symbol>) when the whole image is resized (i.e. show symbol-1 if width > 50 else show symbol-2)?

Upvotes: 3

Views: 1041

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101956

You seem to misunderstand what the whole point of an SVG is.

SVG defines the image in terms of shape definitions. That means it should be able to be drawn at any size and give the best result*.

It is not limited to certain sizes like an ICO file or a PNG, which are pixel based.

* As long as the SVG doesn't specify a fixed size in its header.

Update based on question edit

You can use @media queries in your SVG to style your SVG differently based on the final size.

ellipse {
  fill: lightsteelblue;
  stroke: black;
  stroke-width: 5;
}

@media all and (max-width: 400px)
{
  ellipse {
    stroke-width: 10;
  }
}

@media all and (max-width: 100px)
{
  ellipse {
    fill: white;
  }
}
<svg viewBox="0 0 100 100">
  <ellipse cx="50" cy="75" rx="45" ry="20"/>
  <ellipse cx="50" cy="50" rx="45" ry="20"/>
  <ellipse cx="50" cy="25" rx="45" ry="20"/>
</svg>

Open this CodePen and try resizing the browser window:

https://codepen.io/PaulLeBeau/pen/WdEqye

Be aware that media queries should be supported by all/most browsers, but they may not be supported by other SVG renderers or editors.

Upvotes: 0

Goose
Goose

Reputation: 4821

Is it possible to embed multiple images in SVG file

Absolutely.

The question is how whatever is using the SVG will know if it should use the large or small size of the image.

Let's assume this is for browsers. Split it off into layers (<g>). Here's a very oversimplified example

<svg>
    <g class="layer_large">
        large image
    </g>
    <g class="layer_small">
        small image
    </g>
</svg>

The use some CSS or jQuery to show/hide as needed.

This of course requires something to decide which layer to use. If you loaded this SVG into Inkscape, Inkscape would show two images. I'm not aware of anything in the SVG standard itself to specify how to render an SVG depending on the size it is being rendered.

Upvotes: 2

Related Questions