How To Free Drawing Using Svg In React

What is an SVG?

SVG is a vector graphics image format based on XML. SVG stands for Scalable Vector Graphics. Information technology was developed in the tardily 1990s and was poorly supported until around 2022. Today a huge pct of icon libraries such as Flaticon, Font Awesome, Textile Icon, etc., take full support for SVG. Brands such equally Twitter, Youtube, Udacity, Netflix, etc., use SVG for some of their images and icons.

Why SVG over other image formats?

In that location are other image formats that we are more familiar with such equally JPEGs, GIFs, PNGs, etc. We will take a look at some advantages of using SVG over other prototype formats.

Scalability and resolution: This is the utmost advantage of SVG over others, SVG uses shapes, numbers, and coordinates instead of pixel grids similar other epitome formats practice. This makes it possible to zoom in and out of SVG images without losing any quality and gives SVG the ability to scale infinitely
Minimal file size: The file sizes of SVG images are usually small compared to other file formats and they are easily compressible, giving information technology a possibility to be fifty-fifty smaller
High functioning and speed: Because of the modest size nature of SVG images, it becomes very like shooting fish in a barrel and fast for browsers to return them. It is like rendering text compared to rendering pixels and colors for other prototype formats. Also, if you employ inline SVG in your code, the browser does not accept to make a request to get the prototype and renders information technology just similar every other code in your file. In this example, no request was made. But in a situation where y'all have a circuitous image SVG file such as the Monalisa photo, I would propose using, PNGs or JPEGs as the load time and performance for SVGs fall drastically
DOM-like and style-able: SVG images are like code, so this means it can exist navigated like a DOM element and also styled, although some backdrop have different names eg(you might want to use fill instead of color). It tin can also be styled with CSS
Editable: Since SVGs are DOM-like, SVG'south can be created and edited and animated with any text editor
Integration: SVGs can be used in diverse ways, information technology tin can be used to brandish logo images and icons. It can be used as graphs, animations, and furnishings
Animatable: SVGs can be animated. This tin can be done with tools like Spider web Animation API's, WebGL, CSS animations, etc. For animative SVG with CSS, check out this detailed article past Hope Armstrong
Accessibility and SEO: SVGs contain text which improves the accessibility of a website and it also means they tin exist searched, indexed, scripted, etc.

How to utilise SVGs in React

svg react example

Below we will become through various ways we can utilise or render this React SVG logo on a webpage.

Using image tag for static SVGs

In guild to exist able to use SVGs or any other prototype format in the img <img src={} /> nosotros have to prepare a file loader system in whichever module bundler we are using(Webpack, Package, etc). Hither I will evidence you how to set it up in a few steps if you are already using Webpack.

First, we install the file-loader library $ npm install file-loader --save-dev, this will install it as a dev-dependency.

And you can update your Webpack configuration file rules with this code:

const webpack = require('webpack');  module.exports = {   entry: './src/index.js',   module: {     rules: [       //...       {         test: /\.(png|jp(e*)g|svg|gif)$/,         use: [           {             loader: 'file-loader',             options: {               name: 'images/[hash]-[proper noun].[ext]',             },           },         ],       },     ],   },   //... };

Now you can import your SVG and employ it equally a variable, like this:

import React from 'react'; {/*images*/} import ReactLogo from './logo.svg';  const App = () => {   return (     <div className="App">       <img src={ReactLogo} alt="React Logo" />     </div>   ); } export default App;

Using the SVG tag

With the same Webpack settings in a higher place we can apply the SVG tag, basically copying and pasting the content of the .svg file into your code. Here is a sample employ case:

import React from 'react';  const App = () => {   return (     <div className="App">       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">         <k make full="#61DAFB">           <path d="M666.three 296.5c0-32.five-forty.7-63.three-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-vi.5-3.8-14.1-v.6-22.4-5.6v22.3c4.six 0 viii.3.ix xi.iv two.6 13.6 7.8 19.v 37.5 14.nine 75.vii-1.1 nine.4-2.9 nineteen.3-v.1 29.iv-19.vi-4.8-41-8.5-63.5-x.9-13.5-18.5-27.5-35.3-41.6-fifty 32.half-dozen-thirty.3 63.ii-46.9 84-46.9V78c-27.five 0-63.five 19.6-99.9 53.6-36.4-33.viii-72.4-53.2-99.9-53.2v22.3c20.7 0 51.iv 16.five 84 46.6-14 fourteen.7-28 31.four-41.iii 49.9-22.6 two.four-44 6.one-63.6 eleven-2.three-ten-4-19.7-v.2-29-four.7-38.2 1.1-67.9 14.6-75.viii 3-1.8 six.ix-2.vi eleven.5-2.6V78.5c-8.4 0-sixteen 1.viii-22.vi 5.6-28.ane 16.ii-34.4 66.7-19.9 130.1-62.2 nineteen.two-102.7 49.9-102.7 82.3 0 32.5 forty.vii 63.3 103.1 82.four-14.4 63.half dozen-8 114.2 20.2 130.4 6.five three.8 14.i five.vi 22.5 5.6 27.5 0 63.5-19.half dozen 99.ix-53.6 36.iv 33.8 72.4 53.two 99.ix 53.2 8.4 0 xvi-1.8 22.6-v.six 28.1-sixteen.2 34.4-66.seven xix.nine-130.1 62-nineteen.1 102.5-49.9 102.v-82.3zm-130.two-66.7c-3.7 12.9-8.3 26.2-13.5 39.v-4.one-8-8.4-sixteen-thirteen.1-24-4.6-8-9.v-15.viii-14.four-23.iv 14.2 ii.1 27.ix iv.7 41 7.9zm-45.viii 106.5c-7.eight 13.5-xv.8 26.iii-24.1 38.ii-14.9 one.3-thirty two-45.ii 2-15.1 0-thirty.2-.7-45-one.ix-8.3-11.9-16.4-24.6-24.2-38-seven.6-xiii.1-14.5-26.4-20.8-39.8 half-dozen.2-thirteen.iv 13.2-26.viii 20.seven-39.9 seven.viii-13.5 15.8-26.3 24.1-38.ii 14.ix-1.3 xxx-2 45.two-2 fifteen.1 0 thirty.2.seven 45 ane.9 8.3 xi.9 16.iv 24.six 24.2 38 7.6 xiii.1 xiv.v 26.4 20.viii 39.8-6.3 13.iv-xiii.2 26.8-20.7 39.9zm32.3-13c5.4 13.iv x 26.8 13.8 39.8-thirteen.ane 3.2-26.9 5.9-41.ii 8 iv.9-7.seven 9.8-xv.6 14.four-23.7 4.six-8 8.nine-16.ane 13-24.1zM421.2 430c-9.3-ix.vi-18.half-dozen-20.3-27.eight-32 9 .iv 18.2.vii 27.five.7 ix.4 0 18.7-.two 27.eight-.7-9 11.7-18.iii 22.4-27.5 32zm-74.4-58.9c-14.2-2.i-27.ix-four.7-41-7.9 iii.7-12.9 eight.three-26.two 13.5-39.5 four.i 8 8.four 16 13.ane 24 4.7 viii ix.five fifteen.8 14.4 23.4zM420.vii 163c9.3 9.vi eighteen.vi 20.3 27.eight 32-9-.4-18.2-.7-27.v-.7-nine.four 0-18.7.two-27.viii.vii ix-11.7 xviii.3-22.4 27.v-32zm-74 58.9c-four.9 7.7-9.8 fifteen.6-14.4 23.7-4.6 8-8.9 xvi-13 24-5.4-13.iv-10-26.8-13.8-39.8 13.1-iii.i 26.nine-five.8 41.two-7.9zm-ninety.5 125.2c-35.four-15.1-58.three-34.9-58.3-50.6 0-15.vii 22.9-35.6 58.3-50.half-dozen 8.6-3.seven xviii-7 27.7-x.1 v.vii 19.6 13.2 xl 22.5 lx.ix-9.2 20.viii-sixteen.half dozen 41.1-22.2 60.half-dozen-9.9-3.1-19.3-6.five-28-ten.2zM310 490c-13.six-7.8-19.5-37.v-14.ix-75.7 i.1-nine.4 two.9-19.3 5.1-29.4 19.6 four.8 41 8.v 63.v 10.9 thirteen.5 18.five 27.v 35.iii 41.6 50-32.6 xxx.iii-63.two 46.9-84 46.9-four.5-.1-8.3-i-eleven.3-2.7zm237.2-76.2c4.vii 38.ii-one.1 67.ix-fourteen.six 75.8-3 ane.8-vi.ix two.6-xi.5 2.6-20.7 0-51.4-16.5-84-46.6 14-fourteen.7 28-31.4 41.3-49.nine 22.vi-ii.4 44-6.ane 63.6-11 two.3 x.1 iv.ane 19.8 5.2 29.1zm38.v-66.7c-8.6 three.7-18 7-27.7 10.1-five.7-19.6-13.two-40-22.5-lx.9 9.2-twenty.8 16.6-41.1 22.two-lx.half dozen nine.nine 3.1 nineteen.3 6.5 28.1 10.ii 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.seven-23 35.6-58.4 50.6zM320.8 78.4z"/>           <circumvolve cx="420.ix" cy="296.5" r="45.7"/>           <path d="M520.5 78.1z"/>         </g>       </svg>     </div>   ); } export default App;

With this, we tin already see the disadvantage of using this method, when the epitome is more complex the SVG file becomes larger and since SVG is stored in text, that means we take a whole agglomeration of text in our lawmaking.

Using SVG as a component

SVGs can be imported and used directly as a React component in your React code. The image is not loaded every bit a separate file, instead, it'southward rendered along the HTML. A sample use-case would look similar this:

import React from 'react'; import {ReactComponent equally ReactLogo} from './logo.svg';  const App = () => {   return (     <div className="App">       <ReactLogo />     </div>   ); } export default App;

Note this approach only works with create-react-app, If you are non using create-react-app, I would recommend using other approaches. Create-react-app uses SVGR under the hood to brand it possible to transform and import SVG as a React component.

Using SVGR

SVGR is an awesome tool that converts your SVG into React components that yous can use. And so how exercise nosotros set it up?

Outset, we install the package $ npm install @svgr/webpack --relieve-dev.

Then we update our Webpack configuration rule to use SVGR for SVGs:

const webpack = require('webpack');  module.exports = {   entry: './src/index.js',   module: {     rules: [       //...       {         examination: /\.svg$/,         use: ['@svgr/webpack'],       },     ],   },   //... };

Now nosotros can import our SVG images as a React component and utilise it in our lawmaking like this:

import React from 'react'; import ReactLogo from './logo.svg';  const App = () => {   return (     <div className="App">       <ReactLogo />     </div>   ); } export default App;

Using SVG as a data-url

Data-urls are URLs prefixed with the data: scheme that allow content creators to embed small files inline in documents, y'all can read more well-nigh it here. This approach allows united states of america to use SVG images like an inline element.

So how exercise we reach this? First, we need an advisable Webpack loader in our bundler, in the use case, I volition be using svg-url-loader. We can grab information technology into our project by running this command $ npm install svg-url-loader --save-dev.Then we will update the Webpack configuration file rules section with these rules:

const webpack = require('webpack');  module.exports = {   entry: './src/index.js',   module: {     rules: [       //...       {         test: /\.svg$/,         utilize: [           {             loader: 'svg-url-loader',             options: {               limit: 10000,             },           },         ],       },     ],   },   //... };

Now we tin can import our SVG file and use it in our React component like this:

import ReactLogo from './logo.svg';  const App = () => {   return (     <div className="App">       <img src={ReactLogo} alt="React Logo" />     </div>   ); }  <img src="ebbc8779488b4073081931bd519478e8.svg" alt="" />

This usually complies into something like this in the DOM

<img src="a34r2dad4234dad7824sa4284r0s2345.svg" alt="React Logo" />

See how SVGs impact your users with LogRocket

SVGs help with performance and add a keen level of animation, interactivty, and more than, but sometimes have unintended concequences for end-users. If you lot're interested in monitoring how your SVGs render in your React apps, tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load fourth dimension, try LogRocket. LogRocket Dashboard Free Trial Banner

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you tin aggregate and report on what state your application was in when an result occurred. LogRocket also monitors your app's performance, reporting with metrics similar client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all deportment and land from your Redux stores.

Modernize how yous debug your React apps — get-go monitoring for gratis.

Things to notation

Complicated images: The more complex the epitome the larger the SVG file gets like we saw while trying to use the SVG tag. Hither I will recommend yous go with PNG or JPEG
Backwards back up on the web: SVG doesn't have backwards browser support, which ways that non all older versions of browsers support SVG, so SVG might not brandish correctly in those browsers. This is due to the fact that initially when SVG was first introduced well-nigh browsers did non support SVG. If you are targeting older versions of browsers SVG might not exist your go-to image format

Decision

SVGs are really useful for edifice fast, performant, and accessible webpages. Knowing when and when not to use them will serve you even better. I recommend you utilize SVGs for low-intensity images similar logos, icons, and less-complex images.