Up next in 10
Build a React.js SVG Viewer & Editor to Render SVG Using react-svg Library in Browser
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/369d15873f3bbe6b72b3d65696081dfb
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we look at a another react
0:05
CH
0:06
Library so this Library allows you to
0:08
view SVG files right in the browser
0:11
itself it's a viewer and editor and if
0:15
you select a SVG file we have a choose
0:17
file
0:19
button and we select the SVG file you
0:21
will see it is showing right here and it
0:24
actually you can also edit this file as
0:28
well
0:30
so we have this code right here I will
0:31
show you complete example how to
0:33
integrate this inside react CHS so the
0:36
package that we are using if you go to
0:39
npmjs.com
0:41
just search for react
0:45
dsv the very first package which comes
0:47
this is a package and you just need to
0:50
install
0:51
this by this command npmi react SVG uh
0:56
139,000 weekly downloads are there so
0:59
just go to your command prompt and just
1:03
execute this command which is npmi react
1:08
SVG so this is a
1:12
command so just need to make functional
1:17
component and now to integrate
1:21
this we will actually make the interface
1:24
for
1:26
accepting the SVG file so right at the
1:29
very top we can import this
1:32
module
1:34
react SVG from react SVG and we also
1:38
need to import bootstrap as well we also
1:41
using bootstrap for building the UI I
1:44
will just include
1:46
this the various components container
1:49
form button alert so now for this
1:53
application we need two State
1:55
variables for keeping track of which SVG
1:58
file is selected
2:00
we can use the use hook use State
2:05
hook initial value will be null and then
2:09
for error message if any sort of error
2:11
take
2:14
place initial value will be nothing
2:18
so now in the jsx we will
2:24
have the container class uh
2:30
I will wrap everything in the
2:36
container so then we will have a simple
2:38
heading uh in the center
2:41
position saying that react as FG
2:45
viewer after this we will simply have a
2:48
form where we
2:52
accept we allow the user to Simply
2:55
upload SVG file so we have this form
2:58
control type file we are only accepting
3:00
SVG files and we binded this on change
3:03
event handler so when we select the SVG
3:05
file we executing this function handle
3:08
file upload so I just need to Define
3:10
this
3:14
function so e parameter will be
3:16
automatically be
3:21
passed so in this function we need to
3:24
read the file first of all so we will
3:26
get access to the file by e. target.
3:31
files and after
3:35
this we will show error messages if the
3:38
file is not
3:40
SVG like this set error no file selected
3:43
or please upload a valid SVG file if the
3:47
file is successfully up selected then
3:50
we'll set the error to nothing and then
3:53
we set the SVG
3:55
file to URL dot create object
4:00
URL
4:04
file so now to actually see the live
4:07
preview of the
4:11
SVG we now need to show
4:14
this after the form so if any sort of
4:17
error take place we show this error
4:19
message in the
4:21
jsx using alert
4:23
statement and now to show this SVG we
4:26
will the file is uploaded then only
4:30
in this conditional
4:34
jsx we will have this div
4:40
tag we will give these bootstrap
4:49
classes so you'll have this H5 tag say
4:53
preview and we will use this component
4:56
react SVG
5:01
so this takes the source
5:03
attribute so whatever is the path of the
5:06
SVG file so we have this in this
5:08
variable and then we have to have before
5:12
injection we
5:14
have to execute this inline function and
5:18
we will simply set this
5:21
attribute we can manipulate any
5:23
attribute we can set the style attribute
5:26
we can give vid to 100%
5:30
and height to be
5:43
Auto so like
5:46
this and we just need to attach this
5:49
class which is SVG
5:51
viewer
5:53
this so that's all so if you see the
5:56
result in the browser if you refresh
6:01
so we just need to start this
6:08
application so if you select a different
6:11
file let's suppose not SVG file you will
6:14
see this error please upload a valid SVG
6:16
file and now if you select your SVG you
6:19
will see the preview of the file and in
6:22
this way you can see the SVG files in
6:25
the browser using this nice little
6:27
module which is react SVG in react ch
6:29
applications so thank you very much for
6:32
watching this video please hit that like
6:34
button subscribe to channel and do check
6:36
out my website as well free mediat
6:38
tools.com which contains thousands of
6:40
free tools regarding audio video and
6:42
image and I will be seeing you in next
6:44
video
#Visual Art & Design
#Programming
#Software