Analysis of SVG Component Usage in React and Its Impact on Build Size
TLDR: This document explores the impact of using SVGs as components in ReactJS on the build size of the index.html page. When SVGs were used as React components, the build size increased significantly because they were bundled with the application code. In contrast, using SVGs in image tags reduced the build size and improved initial load time. Developers should consider performance, load time optimization, asset management, and file size awareness when using SVGs in ReactJS applications. Optimization techniques such as compression and lazy loading can help mitigate performance issues caused by large SVG file sizes.
Using SVGs as components in ReactJS allows for dynamic manipulation and control of scalable vector graphics. However, there are considerations regarding performance, accessibility, interactivity, and styling. This document explores a specific scenario where the final build size of the index.html page was significantly large when SVGs were used as React components compared to when they were used in an image tag.
In this scenario, three SVGs were used as components in a ReactJS application. The file sizes of these SVGs were 13MB, 12MB, and 10MB, respectively. The impact on the final build size of the index.html page was measured when using these SVGs as components in ReactJS and when using them in an image tag.
Build Size Analysis:
a. SVGs as React Components:
When using SVGs as React components, the final build size of the index.html page was measured to be 31.1MB. This increase in size can be attributed to the fact that the SVGs were bundled together with the rest of the application code. As a result, the index.html page had to load and parse the entire application, including the SVGs, before rendering. This caused the initial load time to be relatively longer, as the SVGs were loaded after the initial rendering of the page.

b. SVGs in Image Tags:
Contrarily, when the same SVGs were used in image tags, the final build size of the index.html page decreased significantly to 388KB. This reduction in size occurred because the index.html page was parsed and rendered without the SVG assets initially. The SVGs were loaded separately and asynchronously after the initial rendering, resulting in a faster initial load time for the page. This approach deferred the loading of the SVGs, allowing the user to see and interact with the page sooner.

Things to Care About:
Using SVGs as React components can impact performance, especially when dealing with large file sizes or complex SVG structures. The bundled SVGs contribute to the overall build size, potentially resulting in slower initial load times. Careful optimization techniques, such as compressing SVG files or lazy loading, should be considered to mitigate performance issues.
When SVGs are not required for the initial rendering, using image tags and loading SVGs asynchronously can significantly reduce the initial load time of the index.html page. This approach prioritizes the rendering of the page, allowing users to interact with the content sooner.
Conclusion:
In the scenario described, using SVGs as React components resulted in a larger final build size for the index.html page compared to using SVGs in image tags. This occurred because the SVGs were bundled with the application code, causing a delay in the initial load time. Asynchronous loading of SVGs through image tags can reduce the build size and improve the initial load time. Developers should consider the specific requirements of their applications and optimize SVG usage accordingly to strike a balance between performance, user experience, and build size.
More content at PlainEnglish.io.
Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.