4 ways to use svg image in html/css ⚡️️
includes use-cases,...
4 ways to use SVG image in HTML/CSS ⚡️️ Includes use-cases, pros & cons of each...
4 ways to use SVG image in HTML/CSS ⚡️️
Includes use-cases, pros & cons of each way ✨
Thread 🧵 ↓ https://t.co/zDa3ZHYOKb
1. Using <img> element
Use Cases:
- Brand Logo
- Non-interactive icons https://t.co/AVheVaG7kX
2. Using <object> element
Use Cases:
- Third-party interactive SVG widgets
- Interactive SVG charts where SVG code is prepared by backend which is in our control https://t.co/GcgtXjQW6c
3. Using Inline SVG
Use Cases:
- For above-the-fold SVG images to improve performance
- When full control of the SVG image is needed from the HTML document (e.g. background generator, icon creator, etc. ) https://t.co/TA5xVy7lFp
4. Using CSS
Use Cases:
- For decorative images only which you anyway want to hide from screen readers. (e.g. pattern background images, creative section separators etc. ) https://t.co/0YlJKj4L4A
Thanks for checking this out.
Follow @codewithshripal for more such threads on web development.
Retweet/like the first tweet of the thread to help spread the word.
https://t.co/bqlevJFcDR