🔧 SVG essentials. Introduction
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
SVG is an XML-based markup language that stands for Scalable Vector Graphics. As the name suggests, images in SVG format are defined by mathematical formulas, not by grids and pixels (in contrast to raster graphics). It makes SVG format ideal for icons, logos and line drawings:
- they can resize without loss of quality,
- the file size is much smaller than for raster graphics.
Furthermore, we can target elements in an SVG to change their presentation with CSS - fit color to our primary one, add some animation and more! If you need vector images on web, isn't it the best image format?
Table of contents
- SVG in HTML document
- SVG as XML language
- SVG image structure
SVG in HTML document
There are several ways to display an SVG image on a webpage:
- directly embedded (inlining SVG):
<html>
<head>
</head>
<body>
<svg>
</svg>
</body>
</html>
We can manipulate this SVG image with JavaScript and CSS. However, the browser can't cache inline SVG.
- using
imgelement:
<img src="flower.svg" alt="flower" />
We can't control the SVG image with JavaScript. CSS works only inside SVG code. The browser caches the image.
- using
objectelement:
<object data="flower.svg" type="image/svg+xml"></object>
It has similar fallbacks as in with
imgelement
- using
iframeelement:
<iframe src="flower.svg"></iframe>
Since we can open SVG image in the browser as it is, we can embed SVG file in
iframe. However, everyiframerequires more memory and other computing resources.
SVG as XML language
There are main rules for SVG code since it's XML language (that may differ from HTML):
- case-sensitivity,
- closing tags,
- attribute values are in quotation marks (single or double).
SVG image structure
For instance, you got the SVG image created in graphic design software:
Let's analyze the code line by line.
<?xml version="1.0" encoding="UTF-8"?>
The first line identifies file as XML. It's not necessary for SVGs, used in web, unless encoding is other than UTF-8.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
...
</svg>
- It's SVG root element. All drawing happens inside this element.
xlmnsattribute declares XML namespace: the link tosvgtells the browser that this document uses vocabulary defined in SVG.viewBoxdefines a drawing region in abstract units characterized by:
- an origin
min-x min-y. In our example, it's0 0,- a size (width, height). Here, it's
100 100.- All shapes and lines are drawn in respect to this drawing region.
widthandheightcan be set insidesvgtag:width="100" height="100"that means image has100pxas width and height.
<defs>
...
</defs>
defselement defines style or elements, that will be referenced later. In this example,defscontainsstyleelement that is familiar fromhtmlstructure. However, it can also define shapes, gradients, symbols.
<defs>
<style>
.d {
fill: #d2693a;
}
.d,
.e {
stroke: #000;
}
.e {
fill: #8fcc93;
}
</style>
</defs>
It must look similar for CSS users, there are classes with properties:
fillis likebackground-colorfor SVG element,strokeisborder-color.
<g>
...
</g>
This tag groups different objects. In Adobe Illustrator each layer transforms into
<g>element on export as SVG.
<g>
<path class="d" d="M44.11,53.83s23,33.9,0,33.9,0-33.9,0-33.9Z" />
...
<circle class="e" cx="44.11" cy="44.11" r="14.5" />
</g>
...Finally, some actual drawing:
pathis used for more complicated objects, whilecircle,rect,line,ellipse,polygonare basic shapes. Since SVG is XML language, it's required to close all tags and we see that there's/before closing bracket incircleandpath.
🔧 SVG essentials. Introduction
📈 30.11 Punkte
🔧 Programmierung
🔧 SVG essentials. Gradients and patterns
📈 22.27 Punkte
🔧 Programmierung
🔧 SVG essentials. Basic shapes and path
📈 22.27 Punkte
🔧 Programmierung
🐧 Oh My SVG: reduce the size of SVG
📈 22.04 Punkte
🐧 Linux Tipps
📰 safe-svg SVG validator to prevent XSS
📈 22.04 Punkte
📰 IT Security Nachrichten