d-es-ign / vector Goto Github PK

1. TOC
2. What is SVG
3. Why use SVG
   1. When not to use SVG
   2. Pure HTML/CSS alternative
4. Using SVG
   1. Inner workings
   2. Including SVG
   3. Manipulating SVG

SVG (Scalable Vector Graphics) is a image format that uses mathematical formula to build the image. As a simple example, a rectangle can be created from just the values for height, width, x and y position. With optional styling like rounded corners and fill colors.

By comparison, formats such as jpg, png and gif images are constructed by saving

Going from the definition

There might be cases where there isn't a SVG available, be it due to icon library not having the right option for the use case, lack of vector software (for personal projects), or even time constraints on the ux/design front.

Make sure to always confirm with UX / your team before going with this approach.

In these scenario's there is an alternative to using SVG, which is creative usage of HTML and CSS. This will be fairly similar to working with actual SVGs and can be a great additional tool to have. As well as improve your understanding of graphics/illustrations in general.

Let's say you need an icon of a magnifying glass. Think how you could build its shape using only circles, triangles and (rounded) rectangles. You'll quickly realise that you can build it from a circle for the lense and a rectangle for the handle. Therefor you can create these shapes with by styling two (psuedo-) elements. CSS even allows you to then add additional details like a rounded tip on the handle with border-radius, or adding a border to the lense to create a rim.

For more examples and inspiration have a look at this collection of shapes made with css.

When looking at a SVG file in an editor/IDE, you'll find a familiar to HTML. This is because both are based on XML (Extensible Markup Language), SVG is, essentially, to graphics what HTML is to text.

They follow the same rules for structure, being comprised of elements that have attributes, including things like id and class. The main difference comes from the elements available. So instead of paragraphs and headers you will have things like circles and paths.

Lets look the code that makes up the following heart illustration:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect 
    fill="#f00" 
    width="100" 
    height="100" 
    rx="15"
  />
  <path
    fill="#fff"
    d="
      M 10,30
      A 20,20 0,0,1 50,30
      A 20,20 0,0,1 90,30
      Q 90,60 50,90
      Q 10,60 10,30
      z
    "
  />
</svg>

As a quick explanation of the above, the SVG tag itself is used as a container for all other elements and defines the dimensions/grid the other elements are placed upon. Inside of it we have the rect, defining a rectangle, and the path which has a special d attribute that takes a series of Path Commands. These commands tell where and how the path needs to be drawn and are respresented in tools like Illustrator by visual controls, as shown below.

SVGs can be used in HTML/JSX in the same way as other types of images:

<img src="/path/to/image.svg" alt="SVG as an image">

As well as in CSS (and its pre-processors) as a background image:

figure {
  background-image: url["/path/to/image.svg"];
}

While it is simple to add a SVG file this way, it does not allow you to customise the SVG as it will just be loaded in as a static resource.

• React
• Angular
• Vuejs