A summary about SVG

svg-summary.md

📚 SVG summary

1. Introduction to SVG

1.1. What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines the graphics in XML format

1.2. Advantages

• 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

1.3. Common usages

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 and height 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 and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's center is set to (0, 0)
• The r attribute defines the radius of the circle
• The stroke and stroke-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.

2. SVG Anatomy

Understanding the viewBox and viewport concepts

<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 the viewBox 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)

Document Structure

WIP

3. How to convert an SVG file into a React component

WIP

Sources

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

Other useful links

• 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