diff --git a/documentation/blog/2025-01-06-typescript-record.md b/documentation/blog/2025-01-06-typescript-record.md index 570281556ea8..02f5794d9fce 100644 --- a/documentation/blog/2025-01-06-typescript-record.md +++ b/documentation/blog/2025-01-06-typescript-record.md @@ -4,7 +4,7 @@ description: We'll explore TypeScript Record type with examples. slug: typescript-record-type authors: abdullah_numan tags: [typescript] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-06-16-typescript-record/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-06-16-typescript-record/social-2.png hide_table_of_contents: false --- diff --git a/documentation/blog/2023-11-17-react-svg.md b/documentation/blog/2025-01-07-react-svg.md similarity index 85% rename from documentation/blog/2023-11-17-react-svg.md rename to documentation/blog/2025-01-07-react-svg.md index fd8a98f6e230..ffca8eccea31 100644 --- a/documentation/blog/2023-11-17-react-svg.md +++ b/documentation/blog/2025-01-07-react-svg.md @@ -4,10 +4,12 @@ description: Let's talk about React SVG and how it makes the process of adding a slug: react-svg authors: chidume_nnamdi tags: [react] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-17-react-svg/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-17-react-svg/social-2.png hide_table_of_contents: false --- +**This article was last updated on January 7, 2025, to include sections on Accessibility Best Practices for SVGs and Performance Optimization Tips for Using SVGs in React.** + ## Introduction In the world of making websites look good, pictures, especially images, are super important. They make up a big part (60%!) of what you see online, making websites more interesting and helping to share information. Among the many tools that developers use, React SVG stands out. It's like a superhero for putting cool and scalable graphics, especially Scalable Vector Graphics (SVG), into websites. @@ -21,19 +23,13 @@ Steps we'll cover: - [What is SVG?](#what-is-svg) - [Importing SVGs](#importing-svgs) - [Importing as a React Component:](#importing-as-a-react-component) +- [Using an `` Tag](#using-an-img-tag) - [Inline SVG](#inline-svg) - [Using `react-svg`](#using-react-svg) +- [Troubleshooting SVG Issues](#troubleshooting-svg-issues) +- [Performance optimization with SVGs](#performance-optimization-with-svgs) - [Styling SVGs in React](#styling-svgs-in-react) - - [Inline SVG as JSX](#inline-svg-as-jsx) - - [Manipulating SVG Props](#manipulating-svg-props) - - [Dynamic SVGs](#dynamic-svgs) - - [Initializing State and Props](#initializing-state-and-props) - - [Creating SVG Components](#creating-svg-components) - - [Animating SVG Elements](#animating-svg-elements) - - [Composing SVG Components](#composing-svg-components) - - [Using Third-Party Libraries](#using-third-party-libraries) - - [Animation with SVGs in React](#animation-with-svgs-in-react) - - [Create or Import an SVG](#create-or-import-an-svg) +- [SVG vs Other Image Formats](#svg-vs-other-image-formats) ## What is SVG? @@ -196,6 +192,66 @@ Ensure you have these loaders installed (`npm install --save-dev react-svg-loade Choose the method that best suits your project requirements and workflow. Each approach has its strengths, and the choice often depends on factors such as ease of use, scalability, and the specific needs of your application. +## Troubleshooting SVG Issues + +Add a section regarding common issues people encounter and how one can resolve those while using SVGs in React. + +### SVG Not Rendering + +Ensure that the path to the SVG file is correct. + +- Check whether your bundler is set up to handle SVG files correctly. + +### SVG Styling Not Applying + +Inline styles in React can sometimes clash. Be sure you're using React-compatible syntax: + +```tsx +style={{ fill: "red" }} +``` + +### Poor performance with complex SVGs + +- Minify the SVG or simplify the paths using tools like SVGO. + +- Replace complex animations with pure CSS animations or lightweight alternatives. + +### Accessibility Issues + +- Make sure you have added ARIA roles and labels for screen readers. + +### Dynamic SVGs Not Updating + +- Make sure props are being passed correctly and updating the state tied to your SVG. + +## Performance optimization with SVGs + +Cover how to optimize SVGs for better performance, especially for large or complex graphics. + +Although SVGs are small and scalable, bad ones have performance hurts. Here's how to optimize SVGs: + +- **Minify SVG Files:** +- Use tools like [SVGO](https://github.com/svg/svgo) to remove unnecessary metadata and reduce file size. + +- **Inline SVGs in moderation:** + +For larger SVGs, consider using `` tags over using inline SVGs for the purpose of avoiding large DOMs. + +- **Simplify Complex Graphics:** + +Minimize the number of paths and nodes in your SVGs by employing design tools like Adobe Illustrator and Sketch. + +- **Lazy Load SVGs:** Lazy-load non-critical SVGs to improve page load time. + +- **Icon Sprite Sheets:** Combine multiple SVG icons into one sprite sheet and use them in your views with `` tags: + +```tsx + + {" "} + {" "} + +``` + ## Styling SVGs in React We have seen ways to import and use SVGs in React. Now, let's look at ways we can style SVGs in React. @@ -539,3 +595,16 @@ const InteractiveSVG = () => { export default InteractiveSVG; ``` + +## SVG vs Other Image Formats + +What are some of the advantages of SVGs compared to raster formats like PNG, JPG, or GIF? A brief comparison: + +- **Scalability**: Since SVGs are resolution-independent, they upscale perfectly, whereas with raster images, pixelation starts degrading visible quality beyond certain dimensions. +- **Interactivity**: SVGs can be controlled via CSS and JavaScript to provide animations and user interactions, unlike PNG or JPG. + +- **File Size**: SVGs are often smaller for simple graphics, making them ideal for logos and icons, but they can become larger for complex designs. + +- **Accessibility**: Since SVGs are text-based, this intrinsically means they are far more accessible and searchable. Provided that proper configuration has been applied, screen readers can read out SVGs. + +- **Browser Support**: Most modern browsers handle SVG natively and therefore are quite predictable for web development.