Up next in 10
This SVG Editor & Live Preview Plugin For VSCode IDE is FREE & INSANE
Jul 14, 2025
Get the full source code of application here:
View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you a VS Code
0:04
extension which will show you the live
0:06
preview of your SVG files. If you do
0:09
have a SVG file, by default VS code
0:12
doesn't show you the live preview. It
0:14
shows you like this which is not a very
0:17
simple vanilla kind of an interface. But
0:20
there is an extension which you can
0:21
directly install inside VS code which
0:24
will also show you the live review plus
0:26
the source code as well.
0:32
So there if you just write SVG
0:36
preview there will be quite a number of
0:38
extensions which come.
0:41
You can basically check out each
0:43
extension.
0:45
This is
0:48
the preview for SVG files here. If you
0:52
click that install button it's almost
0:55
got 1 million installs. So it also shows
0:57
you the code as well. You can directly
1:02
edit the source code as well. So now if
1:04
you open your SVG file.
1:11
So
1:16
if you see in the
1:30
SVG previewer.
1:44
So if once you activate this extension,
1:47
let me close this file.
1:58
I think you just need once you activate
2:01
this you just open your command pallet
2:04
and simply type SVG previewer you will
2:07
get this option open preview to the side
2:11
you can zoom in as you can
2:24
So this can happen because if you
2:26
already have a bunch of SVG in uh
2:29
extensions which are already installed
2:31
simply first of all disable those
2:33
extensions
2:35
then install this one and then that will
2:39
definitely work.
2:41
So I already have a SVG extension I
2:44
think which is installed that's why it
2:46
is
2:48
not working but uh this is a extension
2:50
definitely install it and this will show
2:52
you the preview plus the code as well.
2:57
So also check out my website
2:59
freemediattools.com
3:01
uh which contains thousands of tools.
#Development Tools