- SVG stands for Scalable Vector Graphics
- SVG is used to define vector-based graphics for the Web
- SVG defines the graphics in XML format
- SVG images can be created and edited with any text editor
- SVG images can be searched, indexed, scripted, and compressed
- SVG images are scalable
- SVG images can be printed with high quality at any resolution
- SVG images are zoomable
- SVG graphics do NOT lose any quality if they are zoomed or resized
- SVG is an open standard
- SVG files are pure XML
SVG in HTML
Given the following inline SVG for drawing a circle:
<div>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
We conclude:
- An SVG image begins with an
<svg>
element - The
width
andheight
attributes of the<svg>
element define the width and height of the SVG image - The
<circle>
element is used to draw a circle - The
cx
andcy
attributes define thex
andy
coordinates of the center of the circle. Ifcx
andcy
are not set, the circle's center is set to (0, 0) - The
r
attribute defines the radius of the circle - The
stroke
andstroke-width
attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border" - The
fill
attribute refers to the color inside the circle. We set the fill color to yellow - The closing
</svg>
tag closes the SVG image
HTML in SVG
Including HTML tags into SVG elements is not legal, but this is actually achievable by using the <foreignObject>
SVG element. This is possible bacause the <foreignObject>
element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML. This is an example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
HTML in SVG!
</div>
</foreignObject>
</svg>
SVG as image
Given the following HTML code:
<img src="image.svg" alt="image">
The value for the src
attribute contains an .svg
file instead of another type of file, such as .png
, .jpg
, .gif
, etc.
SVG as background-image
Given the following CSS code:
.element {
background-image: url(/images/image.svg);
}
The element tagged with the class name "element" will have applied the SVG as background.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!--
with relative unit such as percentage, the visual size
of the square looks unchanged regardless of the viewBox
-->
<rect x="0" y="0" width="100%" height="100%"/>
<!--
with a large viewBox the circle looks small
as it is using user units for the r attribute:
4 resolved against 100 as set in the viewBox
-->
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<!--
The point of coordinate 0,0 is now in the center of the viewport,
and 100% is still resolve to a width or height of 10 user units so
the rectangle looks shifted to the bottom/right corner of the viewport
-->
<rect x="0" y="0" width="100%" height="100%"/>
<!--
With the point of coordinate 0,0 in the center of the viewport the
value 50% is resolve to 5 which means the center of the circle is
in the bottom/right corner of the viewport.
-->
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
- The viewport is like a window through which you see the content of an SVG
viewBox
is similar to viewport, but you can also use it to pan and zoom- Control the viewport through the width and height parameters on the SVG element
- Control the
viewBox
by adding theviewBox
attribute to the SVG element - The value of the
viewBox
attribute is made up of four separate parameters - The first two parameters of the
viewBox
control the visual field and the last two control the zoom - Increase the first parameter to widen the visual field to the right, and decrease it to widen it to the left
- Increase the second parameter to reduce the field of view, decrease it to widen it
- Make the dimensions of the
viewBox
, that is, the last two parameters, larger than those of the viewport to zoom out, and smaller to zoom in (zoom in)
WIP
WIP
Author | Title | URL |
---|---|---|
w3schools | SVG Tutorial | https://www.w3schools.com/graphics/svg_intro.asp |
w3schools | SVG in HTML | https://www.w3schools.com/graphics/svg_inhtml.asp |
CSS tricks | Everything You Need To Know About SVG | https://css-tricks.com/lodge/svg/ |
MDN Web Docs | foreignObject | https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject |
MDN Web Docs | viewBox | https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox |
Kezz Bracey | SVG Viewport y viewBox | https://webdesign.tutsplus.com/es/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844 |
J. David Eisenberg | SVG Essentials - Chapter 4. Document Structure | https://www.oreilly.com/library/view/svg-essentials/0596002238/ch04.html |
- Free svg background generator for your websites, blogs and app by BGJar
- Free and premium SVG Backgrounds by Matt
- A Guide to SVG Animations (SMIL), by Sara Soueidan
- Multiline SVG Text, from the book SVG Text Layout, by Amelia Bellamy-Royds and Kurt Cagle
- SVG Animation Lab, by María Morales