SVG: What is SVG and How to effectively use it in React?

SVG

Everybody knows that the newest technology leads to the best result. Particularly in the field of eCommerce, having an appealing design will attract lots and lots of potential users. However, there is a graphic format that can interoperate with multiple programming languages namely JavaScript, DOM, CSS and HTML. In short, it is super effective yet very easy to use – the answer is SVG.

You may be wondering, what is SVG and how does it work? Don’t worry, because our dedicated experts from ArrowHiTech are here to help you out! Furthermore, we will slowly explain how it is used in React as many are sharing the same questions on this issue.

To begin, let’s get started with some brief info!

What is SVG?

SVG – Scalable Vector Graphics is a vector graphic format based on XML which is mainly for describing data. The story of the developing process is really interesting because it shows how time and hard work can transform ‘an underdog’ into an impressive tool. It all started when World Wide Web Consortium (W3C) created SVG in 1999. After that, they poorly supported and largely ignored it for almost 20 years. Since 2017, all modern web browsers can handle SVG and it proves to be one of the most important tools to web development.

Common Use

Below are 6 most common use of this graphic format that appears in every modern sites:

  • Illustration
  • Diagram
  • Logo and Icon
  • Animation and Special Effect
  • Interface
  • Interactivity: Infographics, Maps, Charts, etc.
  • And many more

But why is SVG so popular that huge brands like Youtube, Twitter or Netflix love to use it? In short, it must offer amazing benefits that we will show you now!

Why SVG?

SVG 2
SVG brings lots of benefits!

In fact, many developers are choosing SVG over some typical image format such as JPEGs, GIFs, PNGs, and so on. Here are some of its superb advantages:

Wide Scalability

Rather than a pixel grid, SVG uses shapes, numbers and coordinates. As a result, the outcomes are surprisingly scalable in indefinite ways. What’s more, it enables you to combine different shapes and text elements to create any types of visual graphic with a high resolution

Small File Size

SVG requires a much smaller size format and is easy to compress.

High Performance

Likewise, SVG allows high performance and speed thanks to its small size and scalability. 

Programmability

Consequently, this format can be fully editable and can adapt JavaScript, CSS or HTML to create any animations or interactions.

Integration

Besides creating animations or interactions, SVG is integrated to develop logos, images as well as icons. In fact, the most popular icon libraries such as Flaticon, Font Awesome and  Material Icon have full support for it.

Accessibility 

SVG files are text-based. Therefore, it can be readable by screen readers and search engines. In addition, it helps improve SEO – the accessibility of a website. 

So far, we have shown you some key points about SVG. Last but surely not least, ArrowHiTech will provide you the ways to use it in React!

How using SVG in React ?

1. Use image tag (for static ones)

The key to using an image tag is to have a file loader system. Thus, today, we will show you simple steps if you are using Webpack.
First thing first, install the file-loader library via the following code: $ npm install file-loader –save-dev

Then, update your configuration file:

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]-[name].[ext]’,

Finally, import SVG and you can use it as a variable like so:

import React from ‘react’;

{/*images*/}

import React logo SVG from ‘./logo.svg’;

const App = () => {

  return (

    <div className=”App”>

      <img src={ReactLogo} alt=”React Logo” />

    </div>

  );

}

export default App;

2. Use SVG tag

To sum up, all you need to do is just to copy and paste the .svg file content into your code. However, if the image is more complex, the files will get larger. As a result, you may have too much text in your code, which goes against SVG’s benefits. Thus, we really don’t recommend using this method.

On the other hand, if you want to integrate SVG this way, you can contact experts like ArrowHiTech for easy and quick solutions.

3. Use SVG as a data-url

Firstly, you need to have a Webpack loader in the bundler : $ npm install svg-url-loader –save-dev

Then, we update the configuration via this rules:

const webpack = require(‘webpack’);

module.exports = {

  entry: ‘./src/index.js’,

  module: {

    rules: [

      //…

      {

        test: /\.svg$/,

        use: [

          {

            loader: ‘svg-url-loader’,

            options: {

              limit: 10000,

Finally, you can import SVG file and use it in React:

import React logo SVG from ‘./logo.svg’;

const App = () => {

  return (

    <div className=”App”>

      <img src={ReactLogo} alt=”React Logo” />

    </div>

  );

}

<img src=”ebbc8779488b4073081931bd519478e8.svg” alt=”” />

Note that it sometimes complies into this in the DOM:

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

4. Use SVGR

The last method we want to show you is to use SVGR. 

To begin with, install this package: $ npm install @svgr/webpack –save-dev

After that, update the configuration via this rules:

const webpack = require(‘webpack’);

module.exports = {

  entry: ‘./src/index.js’,

  module: {

    rules: [

      //…

      {

        test: /\.svg$/,

        use: [‘@svgr/webpack’],

Lastly, you can import SVG images and use it in the code like follow:

import React from ‘react’;

import React logo SVG from ‘./logo.svg’;

const App = () => {

  return (

    <div className=”App”>

      <ReactLogo />

    </div>

  );

}

export default App;

Overall, above are the 4 useful ways for using SVG in React. However, there are some key points that you must pay close attention to.

Attention!

Complex Image

When using the SVG tag, more complexity means a larger file. Therefore, you should go for the typical PNG or JPEG.

Backwards Support

On the other hand, SVG doesn’t have any backwards support. In other words, older versions of browsers may have no SVG support. 

To Sum up

In this article, ArrowHiTech has shown you the basic information of using svg in React and 4 useful methods to use it in React. If you have any further issues or questions, don’t hesitate to contact us for the suitable solutions. We are confident because our 12+ years of IT outsourcing experience and dedication will guarantee the best results at such affordable prices.

arrowhitech

We hope that you have learned lots of new things today! As always, ArrowHiTech truly wishes you the best of good luck and success. We would love to hear from you at:


Tags

Share