4 ways to use SVG image in HTML/CSS ⚡️️
Includes use-cases, pros & cons of each way ✨
Thread 🧵 ↓
Includes use-cases, pros & cons of each way ✨
Thread 🧵 ↓
1. Using <img> element
Use Cases:
- Brand Logo
- Non-interactive icons
Use Cases:
- Brand Logo
- Non-interactive icons
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
Use Cases:
- Third-party interactive SVG widgets
- Interactive SVG charts where SVG code is prepared by backend which is in our control
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. )
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. )
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. )
Use Cases:
- For decorative images only which you anyway want to hide from screen readers. (e.g. pattern background images, creative section separators etc. )
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.
Follow @codewithshripal for more such threads on web development.
Retweet/like the first tweet of the thread to help spread the word.
Loading suggestions...