Using React with SVG
In this guide, you'll learn how to draw graphics (specifically the Mastercard Logo) and shapes with SVG and how to add SVG graphics to your React app.
Oct 31, 2020 • 4 Minute Read
Introduction
Scalable Vector Graphics (SVG) is an XML-like syntax used to display vector graphics or images in a browser. Vector graphics produced by SVG can be scaled or zoomed to the very maximum without being rasterized or losing quality. The most interesting aspect is that SVG is supported by all major browsers. In this guide, you'll learn how to draw graphics (specifically the Mastercard Logo) and shapes with SVG and how to add SVG graphics to your React app.
Understanding SVG syntax
If you're familiar with HTML or XML, using SVG's syntax should be pretty simple to grasp. Writing SVG elements is based on two strict guidelines:
- All attributes must be placed in quotes regardless of the type of value (string or integer), as shown below
<rect width="100%" fill="purple" ...../>
- SVG elements and attributes are all case-sensitive, hence, changing the case of an element or attribute is invalid SVG.
// Drawing a rectangle
<rect width="100%" fill="purple" ...../>
// NOT
<RECT WIDTH="100%" FILL="ORANGE"../>
Drawing Shapes
As mentioned, you'll learn how to draw the Mastercard logo with SVG. Every SVG element is wrapped around an <svg/> tag with a version and the size of the drawing area.
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
// Content Here
</svg>
Next, add a rectangle with a black background.
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<rect width="100%" height="100%" fill="black"></rect>
</svg>
Add the two circles that intersect .
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
</svg>
The r attribute refers to the radius of the circle.
cx and cy refer to the position of the element on the x and y coordinates of the circle.
Finally, add some text to your logo.
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
<text x="200" y="219" font-size="20" text-anchor="middle" fill="white">MasterCard</text>
</svg>
To see how this looks, create an HTML file and open it up in your browser. You're a genius! Try to tweak the attributes some more to gain more understanding of what they do.
Set Up and App
Now that you have a world-class SVG logo, set up your React app by entering the following in your terminal.
npx create-react-app <YOUR_APP_NAME>
You can also visit https://react.new to get a fully configured React environment on codesandbox.io.
Add SVG to the App
Rendering an SVG element is very simple with Create React App. To do so, create an SVG file that contains the logo you've created and save it. In this guide, I'll assume you saved it in svg/ .
Next, import it into your app, as shown below.
import React from 'react';
import { ReactComponent as MyLogo } from './assets/logo.svg';
function App(){
return(
<div>
<MyLogo/>
</div>
);
}
Conclusion
And voila! In this guide, you learned how to create an SVG element and add it to a React app. SVG goes far beyond creating basic shapes. You can do more stuff, including gradients and animations.
The Mozilla developer network documentation hasa very detailed explanation of Scalable Vector Graphics. Feel free to also reach out to me on Twitter @DesmondNyamador.
