Comments (5)
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.
Related Issues (20)
- [BUG] PHP 8.1 Undefined array key HOT 6
- 4.0.5 and TYPO3 11 doesn't minify HTML HOT 2
- PHP Runtime Deprecation Notice if svgstore is enabled HOT 10
- Support TYPO3 v12 HOT 3
- Bug in JSON-Escaping HOT 5
- [BUG] Split html into it's elements HOT 2
- TYPO3 v10 compatibility HOT 5
- New changes HOT 1
- Please support TYPO3 v11 HOT 3
- composer.json and release notes mismatch wrt. PHP version HOT 1
- TypeError with 4.0 due to wrong array access
- Sourceopt destroys XML-Sitemap & RSS feed (blog extension) HOT 3
- Undefined array key "svgstore." HOT 2
- Exception: ... SvgStoreService::addFileToSpriteArr() must be of the type array or null ... HOT 4
- Problem with special Pagetype HOT 3
- Php 7.3 support HOT 3
- Query in SvgFileRepository not compatible with sql_mode=only_full_group_by HOT 3
- Breaks Ext:cart Ajax functionality HOT 6
- PHP version constraint in ext_emconf.php doesn't match version constraint in composer.json HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sourceopt.