code • SVG images - martindubenet/wed-dev-design GitHub Wiki

[  Code SVG images  ][  Use svgOMG app  ]

Code SVG images

SVG are XML code files used for displaying vectorial images that has the benefit of Resizability, High-definition and Animation compliance (via JavaScript). It offers the best ration of file size VS image quality you can get for the web and mobile needs of the internet.

 

Design SVG

Use the SVGOMG webapp to clean your SVG file of any propriatary code and garbage that comes from vectorial drawing application. Even if Inkscape is more respectful in this regard, better then Illustrator who generates massive metas pollution, nothing does a better job then dropping your SVG file within SVGOMG.

Common metas that you may not need

  1. xmlns : This SVG tag attribute is required for W3C validation but depending on the project you may not need them.
  2. viewBox : Only required if your image ratio is not square.
  3. name : Identify your image for web inspectors by declaring name="FileNameExample" at the higher level possible. In some case on the <svg> tag itself or, add it if you don't have one, on a Group tag (<g>) that wraps the inner elements that compose your image.
  4. fill :
    • Mono-chrome : If you design is only 1 color you don't need any fill declaration in your file. Set it via global CSS.
    • Duo-tone : If you image has 2 colors and more, replace fill="#666" attributes by class="example" and apply the inline fill declaration as a local CSS property within a <style>.example{fill:#666;}</style> declaration at the top, just after you opening <svg> tag.
    • Transparency : fill="none".
  5. withand height : Delete them from the file so you can set those 2 values via CSS rules. This helps with responsive design.

Use SVG

As background-image via CSS

  • PROs:
    • This technique makes source code very clean and easy to read for collegue developers.
    • Supports the mouse events (:hover)
    • Good for static image.
  • CONs:
    • Good for static image ONLY!
    • You can not interact with the layers of your SVG image as you can with inline SVG code that is in the DOM of your document.

DOM

<img class="svg-square-icon mapped-image" alt="Alternative image description text" />

SCSS

.svg-square-icon {
  width: 24px;
  aspect-ratio: 1 / 1;
  background: transparent no-repeat center center;
  background-size: 100% auto;

  &.mapped-image {
    background-image: url(/assets/img/my-image.svg);
  }
}

CSS variable within SVG

CSS variables var(--varName) are supported both from within the SVG but also accessable from your project CSS files.

DOM

<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-img" … /svg>
</div>

Complexe SVG file

<svg xmlns="http://www.w3.org/2000/svg" class="svg-img" role="img" aria-label="{{imgAltDescription}}">
  <style>.default-color{ fill: currentColor; } .status-color{ fill: var(--svgStatusColor); }</style>
  <g class="foreground-shape">
    <path class="status-color" d="…" />
    <path class="default-color" d="…" />
  </g>
  <path class="default-color" d="…" />
</svg>

SCSS

// Apply color to parent sets the value of all elements of the SVG where `fill` value is `currentColor`
.svg-container {
  color: $themeColors.neutral;

  // -OR- apply color within the SVG to a specific element
  .svg-img {
    .foreground-shape {
      .default-color {
        fill: $themeColors.primary;
      }
    }
  }
}

Dynamic JS logic for state related colors

if STATUS === 'success' {
  var(--svgStatusColor) = var(--color-status-success)
};

USE SYMBOLs for mapping SVG image within the DOM

The best practice to load SVG files into a site, especially if they are reused multiple times like for icons, is through the use of the <symbol> and <use> SVG tags as described in this Mozilla documentation and that you can observe on the Google Business site (among others).

Example of SVG symbol use

Example

DOM

<body>
…
<main>
  <header class="svg-container">
    <svg id="site-logo" class="svg-img" role="img" aria-label="{{brand.name}} logo" focusable="false">
      <use xlink:href="#brand-colors-logo"></use>
    </svg>
    <h1>{{brand.name}}</h1>
  </header>
  …
  <a class="svg-container">
    <svg class="svg-img--square no-print-display" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="#icon-close"></use>
    </svg>
    Close
  </a>
  …
</main>
<svg xmlns="http://www.w3.org/2000/svg" id="iconsMap" aria-hidden="true" focusable="false" style="display:none">
  <symbol id="icon-close" viewbox="0 -960 960 960">
    <path class="material-symbol--close" style="fill: currentColor" d="…"/>
  </symbol>
  <symbol id="icon-menu" viewbox="0 0 24 24">
    <path class="material-symbol--menu" style="fill: currentColor" d="…"/>
  </symbol>
  <symbol id="brand-colors-logo" viewbox="0 0 591.7 610">
    <path class="txt-color" d="…" />
    <path class="txt-color" d="…" />
    <path class="hexagone-path shape--background" d="…" />
    <path class="hexagone-path shape--left-foreground" d="…" />
  </symbol>
  <symbol id="brand-monochrome-logo" viewbox="0 0 24 24">
    <path style="fill: currentColor" d="…" />
  </symbol>
</svg>
</body>
</html>

SCSS

.svg-img {
  &--square {
    aspect-ratio: 1 / 1;
  }

  // Apply drop-shadow on all <path> elements nested within symbol's <use> except for #site-logo
  &:not(#site-logo) {
    use {
      filter: drop-shadow(0 0 2px rgba(black, 0.7));
    }
  }

  // Apply colors
  #brand-colors-logo {
    .txt-color {
      fill: White;
    }
    .hexagone-path {
      &.shape {
        &--background      { fill: Green; }
        &--left-foreground { fill: Lime; }
      }
    }
  }
}

// Site header
#site-logo {
  position: relative;
  width: 600px;
  aspect-ratio: 2 / 1; // horizontal rectangle
  clip-path: polygon(100% 0, 0 0, 0 100%);
  background-color: black;
  background: linear-gradient(315deg, #383938 0%, #010101 100%);
}

 

Specifications

List of all elements and metas supported in an SVG file.

 

 

My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️