SVGStore must not apply to <picture><img src="pic.svg"></picture> about sourceopt HOT 5 CLOSED

may you please provide examples where <(img|source) src=".svg" is used within <picture>

from sourceopt.

Here is an example for dark using a different image when relying on the users color preference ("dark mode"):

<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)"/>
  <img src="logo-default.svg"/>
</picture>

the different sources may also differ in aspect ratio, thus swapping a landscape SVG with a portrait SVG, depending on viewport size may also be useful:

<picture>
  <source srcset="pic-tall.svg" media="(max-width: 800px)"/>
  <img src="pic-wide.svg"/>
</picture>

And finally, you can expand on the fallback option and define a hierarchy of preferred formats. first supported option gets picked in this case. however, for this example it is unrealistic that the <img> itself is an SVG:

<picture>
  <source srcset="pic.svg" type="image/svg+xml"/>
  <source srcset="pic.png" type="image/png"/>
  <img src="pic.svg"/>
</picture>

from sourceopt.

Here is an example for dark using a different image when relying on the users color preference ("dark mode"):

would suggest to use https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
<svg xmlns="http://www.w3.org/2000/svg" viewBox="[..]" fill="currentColor"> & @css via color:

the different sources may also differ in aspect ratio, thus swapping a landscape SVG with a portrait SVG, depending on viewport size may also be useful:

true

from sourceopt.

please check version 4.0.2

from sourceopt.

Looks good to me! Thanks!

from sourceopt.