What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!

Learn more about web design, SVG, and CSS in this tutorial: https://fireship.io/lessons/css-cards-animated/

References: 

Star Wars Animation https://codepen.io/nerdmanship/pen/ZLoyPG
Path Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

#webdev #html #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:55:26.594Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
aefcbe73-4f63-43aa-9cc8-1a3fb8df4104
7ae3c731abb52e022d09d7df7dac87d122468666d865298e1b17ee37cde638a3
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2 d graphics.
They differ from raster images, like PNG or JPEG that use a grid of tiny pixels to create an image.
And as you zoom in, the pixels become larger, making the image grainy.
In rast.
A vector image can be scaled to any size without losing its resolution because instead of fixed pixels, its appearance is based on geometry.
You can create SVGs with tools like Figma or Illustrator, or by writing the code directly, which is easier than you might think and opens the door to animation and interactivity.
Create one by opening an SVG tag, then define a coordinate system with the view box attribute.
That gives us a frame with a width and height of 100 units on which we can draw graphics.
Draw basic shapes by adding elements like rectangle, circle, and polygon.
Position the rectangle by defining its x y value on the view box, then give it a size which can take values that are either or explicit or responsive.
We can change the color of the shape by defining its fill or define an outline with the stroke attribute.
And if our styling It's too complex.
We can extract everything into a separate CSS stylesheet by applying a class to it just like any HTML element.
We have the full power of CSS at our fingertips, which means we can react to events on the shapes and then change their styling or animation accordingly.
But, most graphics are more than just basic shapes.
They contain complex artwork with all kinds of twists and turns, and that's where the path element comes in.
The shape of a path is determined by one attribute, d for draw.
Coding a path is like controlling the tip of a pen with a series of commands.
The most basic command is m for move, which will move the pen tip to an x y coordinate.
An uppercase letter means move relative to the viewBox and lowercase means move relative to the last point in the path.
But, move doesn't actually draw anything.
To put the pen tip down on the paper and draw something, use the l command.
It works exactly like move, but draws a line that can be styled.
Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator?
Create bezier curves with the c and q commands.
Define the position of 2 control points, then the x and y coordinates where the curve should end.
Then SVG will automatically calculate a smooth with curve4uatanyscale.
This has been Scalable Vector Graphics in 100 seconds.
If you wanna see more short videos like this, hit the like button and subscribe.
Thanks for watching, and I will see you in the next one.

Speaker 0: Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2 d graphics. They differ from raster images, like PNG or JPEG that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In rast. A vector image can be scaled to any size without losing its resolution because instead of fixed pixels, its appearance is based on geometry.

You can create SVGs with tools like Figma or Illustrator, or by writing the code directly, which is easier than you might think and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the view box attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its x y value on the view box, then give it a size which can take values that are either or explicit or responsive.

We can change the color of the shape by defining its fill or define an outline with the stroke attribute. And if our styling It's too complex. We can extract everything into a separate CSS stylesheet by applying a class to it just like any HTML element. We have the full power of CSS at our fingertips, which means we can react to events on the shapes and then change their styling or animation accordingly. But, most graphics are more than just basic shapes.

They contain complex artwork with all kinds of twists and turns, and that's where the path element comes in. The shape of a path is determined by one attribute, d for draw. Coding a path is like controlling the tip of a pen with a series of commands. The most basic command is m for move, which will move the pen tip to an x y coordinate. An uppercase letter means move relative to the viewBox and lowercase means move relative to the last point in the path.

But, move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the l command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the c and q commands.

Define the position of 2 control points, then the x and y coordinates where the curve should end. Then SVG will automatically calculate a smooth with curve4uatanyscale. This has been Scalable Vector Graphics in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2 d graphics. They differ from raster images, like PNG or JPEG that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In rast. A vector image can be scaled to any size without losing its resolution because instead of fixed pixels, its appearance is based on geometry. You can create SVGs with tools like Figma or Illustrator, or by writing the code directly, which is easier than you might think and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the view box attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its x y value on the view box, then give it a size which can take values that are either or explicit or responsive. We can change the color of the shape by defining its fill or define an outline with the stroke attribute.
geometry
graphic design
visualization
animation
And if our styling It's too complex. We can extract everything into a separate CSS stylesheet by applying a class to it just like any HTML element. We have the full power of CSS at our fingertips, which means we can react to events on the shapes and then change their styling or animation accordingly.
But, most graphics are more than just basic shapes. They contain complex artwork with all kinds of twists and turns, and that's where the path element comes in. The shape of a path is determined by one attribute, d for draw. Coding a path is like controlling the tip of a pen with a series of commands.
graphic design
geometry
visualization
The most basic command is m for move, which will move the pen tip to an x y coordinate. An uppercase letter means move relative to the viewBox and lowercase means move relative to the last point in the path.
But, move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the l command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the c and q commands. Define the position of 2 control points, then the x and y coordinates where the curve should end. Then SVG will automatically calculate a smooth with curve4uatanyscale.
graphic design
geometry
This has been Scalable Vector Graphics in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
visualization
animation
multimedia
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2 d graphics. They differ from raster images, like PNG or JPEG that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In rast. A vector image can be scaled to any size without losing its resolution because instead of fixed pixels, its appearance is based on geometry. You can create SVGs with tools like Figma or Illustrator, or by writing the code directly, which is easier than you might think and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the view box attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its x y value on the view box, then give it a size which can take values that are either or explicit or responsive. We can change the color of the shape by defining its fill or define an outline with the stroke attribute. And if our styling It's too complex. We can extract everything into a separate CSS stylesheet by applying a class to it just like any HTML element. We have the full power of CSS at our fingertips, which means we can react to events on the shapes and then change their styling or animation accordingly. But, most graphics are more than just basic shapes. They contain complex artwork with all kinds of twists and turns, and that's where the path element comes in. The shape of a path is determined by one attribute, d for draw. Coding a path is like controlling the tip of a pen with a series of commands. The most basic command is m for move, which will move the pen tip to an x y coordinate. An uppercase letter means move relative to the viewBox and lowercase means move relative to the last point in the path. But, move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the l command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the c and q commands. Define the position of 2 control points, then the x and y coordinates where the curve should end. Then SVG will automatically calculate a smooth with curve4uatanyscale. This has been Scalable Vector Graphics in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
Scalable
scalable
Vector
vector
Graphics,
graphics
or
or
SVG,
svg
is
is
an
an
image
image
format
format
that's
that's
like
like
HTML
html
for
for
2
2
d
d
graphics.
graphics
They
they
differ
differ
from
from
raster
raster
images,
images
like
like
PNG
png
or
or
JPEG
jpeg
that
that
use
use
a
a
grid
grid
of
of
tiny
tiny
pixels
pixels
to
to
create
create
an
an
image.
image
And
and
as
as
you
you
zoom
zoom
in,
in
the
the
pixels
pixels
become
become
larger,
larger
making
making
the
the
image
image
grainy.
grainy
In
in
rast.
rast
A
a
vector
vector
image
image
can
can
be
be
scaled
scaled
to
to
any
any
size
size
without
without
losing
losing
its
its
resolution
resolution
because
because
instead
instead
of
of
fixed
fixed
pixels,
pixels
its
its
appearance
appearance
is
is
based
based
on
on
geometry.
geometry
You
you
can
can
create
create
SVGs
svgs
with
with
tools
tools
like
like
Figma
figma
or
or
Illustrator,
illustrator
or
or
by
by
writing
writing
the
the
code
code
directly,
directly
which
which
is
is
easier
easier
than
than
you
you
might
might
think
think
and
and
opens
opens
the
the
door
door
to
to
animation
animation
and
and
interactivity.
interactivity
Create
create
one
one
by
by
opening
opening
an
an
SVG
svg
tag,
tag
then
then
define
define
a
a
coordinate
coordinate
system
system
with
with
the
the
view
view
box
box
attribute.
attribute
That
that
gives
gives
us
us
a
a
frame
frame
with
with
a
a
width
width
and
and
height
height
of
of
100
100
units
units
on
on
which
which
we
we
can
can
draw
draw
graphics.
graphics
Draw
draw
basic
basic
shapes
shapes
by
by
adding
adding
elements
elements
like
like
rectangle,
rectangle
circle,
circle
and
and
polygon.
polygon
Position
position
the
the
rectangle
rectangle
by
by
defining
defining
its
its
x
x
y
y
value
value
on
on
the
the
view
view
box,
box
then
then
give
give
it
it
a
a
size
size
which
which
can
can
take
take
values
values
that
that
are
are
either
either
or
or
explicit
explicit
or
or
responsive.
responsive
We
we
can
can
change
change
the
the
color
color
of
of
the
the
shape
shape
by
by
defining
defining
its
its
fill
fill
or
or
define
define
an
an
outline
outline
with
with
the
the
stroke
stroke
attribute.
attribute
And
and
if
if
our
our
styling
styling
It's
it's
too
too
complex.
complex
We
we
can
can
extract
extract
everything
everything
into
into
a
a
separate
separate
CSS
css
stylesheet
stylesheet
by
by
applying
applying
a
a
class
class
to
to
it
it
just
just
like
like
any
any
HTML
html
element.
element
We
we
have
have
the
the
full
full
power
power
of
of
CSS
css
at
at
our
our
fingertips,
fingertips
which
which
means
means
we
we
can
can
react
react
to
to
events
events
on
on
the
the
shapes
shapes
and
and
then
then
change
change
their
their
styling
styling
or
or
animation
animation
accordingly.
accordingly
But,
but
most
most
graphics
graphics
are
are
more
more
than
than
just
just
basic
basic
shapes.
shapes
They
they
contain
contain
complex
complex
artwork
artwork
with
with
all
all
kinds
kinds
of
of
twists
twists
and
and
turns,
turns
and
and
that's
that's
where
where
the
the
path
path
element
element
comes
comes
in.
in
The
the
shape
shape
of
of
a
a
path
path
is
is
determined
determined
by
by
one
one
attribute,
attribute
d
d
for
for
draw.
draw
Coding
coding
a
a
path
path
is
is
like
like
controlling
controlling
the
the
tip
tip
of
of
a
a
pen
pen
with
with
a
a
series
series
of
of
commands.
commands
The
the
most
most
basic
basic
command
command
is
is
m
m
for
for
move,
move
which
which
will
will
move
move
the
the
pen
pen
tip
tip
to
to
an
an
x
x
y
y
coordinate.
coordinate
An
an
uppercase
uppercase
letter
letter
means
means
move
move
relative
relative
to
to
the
the
viewBox
viewbox
and
and
lowercase
lowercase
means
means
move
move
relative
relative
to
to
the
the
last
last
point
point
in
in
the
the
path.
path
But,
but
move
move
doesn't
doesn't
actually
actually
draw
draw
anything.
anything
To
to
put
put
the
the
pen
pen
tip
tip
down
down
on
on
the
the
paper
paper
and
and
draw
draw
something,
something
use
use
the
the
l
l
command.
command
It
it
works
works
exactly
exactly
like
like
move,
move
but
but
draws
draws
a
a
line
line
that
that
can
can
be
be
styled.
styled
Straight
straight
lines
lines
are
are
cool,
cool
but
but
what
what
if
if
we
we
wanted
wanted
to
to
add
add
a
a
curve
curve
like
like
we
we
would
would
with
with
the
the
handles
handles
in
in
Illustrator?
illustrator
Create
create
bezier
bezier
curves
curves
with
with
the
the
c
c
and
and
q
q
commands.
commands
Define
define
the
the
position
position
of
of
2
2
control
control
points,
points
then
then
the
the
x
x
and
and
y
y
coordinates
coordinates
where
where
the
the
curve
curve
should
should
end.
end
Then
then
SVG
svg
will
will
automatically
automatically
calculate
calculate
a
a
smooth
smooth
with
with
curve4uatanyscale.
curve4uatanyscale
This
this
has
has
been
been
Scalable
scalable
Vector
vector
Graphics
graphics
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker explains how to create a variable frame for media and animation using the proper media format. They also discuss the use of CSS to create path elements and createRAI curves for shapes. The speaker emphasizes the power of CSS for changing the look of media and animation, and encourages viewers to subscribe to their channel for more short videos.
SVG Explained in 100 Seconds
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2 d graphics. They differ from raster images, like PNG or JPEG that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In rast. A vector image can be scaled to any size without losing its resolution because instead of fixed pixels, its appearance is based on geometry. You can create SVGs with tools like Figma or Illustrator, or by writing the code directly, which is easier than you might think and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the view box attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its x y value on the view box, then give it a size which can take values that are either or explicit or responsive. We can change the color of the shape by defining its fill or define an outline with the stroke attribute. And if our styling It's too complex. We can extract everything into a separate CSS stylesheet by applying a class to it just like any HTML element. We have the full power of CSS at our fingertips, which means we can react to events on the shapes and then change their styling or animation accordingly. But, most graphics are more than just basic shapes. They contain complex artwork with all kinds of twists and turns, and that's where the path element comes in. The shape of a path is determined by one attribute, d for draw. Coding a path is like controlling the tip of a pen with a series of commands. The most basic command is m for move, which will move the pen tip to an x y coordinate. An uppercase letter means move relative to the viewBox and lowercase means move relative to the last point in the path. But, move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the l command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the c and q commands. Define the position of 2 control points, then the x and y coordinates where the curve should end. Then SVG will automatically calculate a smooth with curve4uatanyscale. This has been Scalable Vector Graphics in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
In this video, the speaker explains how to create a variable frame for media and animation using the proper media format. They also discuss the use of CSS to create path elements and createRAI curves for shapes. The speaker emphasizes the power of CSS for changing the look of media and animation, and encourages viewers to subscribe to their channel for more short videos.