SVG

Dima Vishnevetsky

The hidden powers

⚡️

Most of you used SVG before!

We all know that we can use SVG for scalable icons

We can also animate them and still be able to control all the styling

https://lottiefiles.com

👉

Some of you used SVG for other stuff besides Icons

We all know we can use SVG for graphics and illustrations

https://www.humaaans.com

👉

Who used SVG for anything else?

Using SVG for illustrations and icons only scratches the surface of this format’s potential on the web

About me

Dima Vishnevetsky

@dimshik100

💚 VueJS Israel community leader

💼 Consultant

📐 UX / UI Designer

🖼 Media Developer Expert @ Cloudinary

👨‍🏫 #HackathonMentor

🎓 Lecturer

🗣 International Tech speaker

👨‍💻 Front End Architect

SVG and Front End frameworks

Vue documentation suggest using SVG Icon Systems

https://github.com/sdras/vue-sample-svg-icons/

👉

<template>
  <svg
    @click="startScissors"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    width="100"
    height="100"
    aria-labelledby="scissors"
    role="presentation"
  >
    <title
      id="scissors"
      lang="en"
    >Scissors Animated Icon</title>
    <path
      id="bk"
      fill="#fff"
      d="M0 0h100v100H0z"/>
    <g ref="leftscissor">
      <path d="M..."/>
      ...
    </g>
    <g ref="rightscissor">
      <path d="M..."/>
      ...
    </g>
  </svg>
</template>

We can copy the SVG code directly inside our templates

Of course, we don't like to do it manually, we have tools to help us

Vue-svg-loader

https://vue-svg-loader.js.org

👉

<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOLogo from './public/svgo.svg';
import WebpackLogo from './public/webpack.svg';
 
export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  },
};
</script>

Using SVG as a component feels very natural

Is this a talk not about the common knowledge on how to use SVG?

Import SVG with webpack

Use SVG sprites with

Wait a minute

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  ...
};

<svg viewBox="0 0 100 100" class="icon shape">
  <use xlink:href="#shape"></use>
</svg>

In this talk we will focus on the What

I don't think that most of the Front End Developers are as comfortable with SVG as they should be

Developers (and I'm guilty of this myself) will in most cases build stuff using HTML and CSS instead of drawing it in a much simple and easy way with SVG

Julie Park

Everything done with SVG can be created using HTML & CSS

mario s maselli

YES

SVG is one of the most powerful technologies available on the web

💪

Make money 🤑 from SVG

https://loading.io/pattern/m-firefly

👉

WHAT

Can we do with SVG?

Show emotions with SVG animations

https://emotivefeels.com

👉

3D with SVG

https://zzz.dog

👉

Build design systems

Simon Goellner

  <mochi-box shiba="anko" mood="cheeky" 
    left-eye="open" right-eye="laugh"
    left-ear="flat" right-ear="middle"> 
    <h2>あんこ</h2>
    <h3>
      <a target="_blank" href="#">Sweet Bean</a>
    </h3>
    <p class="shop uemachi" title="uemachi">うえまち団子</p>
  </mochi-box>

.anko {
  .outline { stroke: #3c2012; }
  .fur { fill: #603d1e; }
  .fur2 { fill: #fad4af; }
  .inner { fill: #fad4af; }
  .eye { fill: #3c2012; }
}

.MochiShiba {
  &.blush {
    #cheeks { visibility: visible }
  }
  &.content {
    [id^=mouth] { visibility: hidden; }
  }
  &.happy {
    [id^=mouth] { visibility: hidden; }
    #mouth2 { visibility: visible; }
  }
  &.excited {
    [id^=mouth] { visibility: hidden; }
    #mouth3 { visibility: visible; }
  }
}

Vue.component( "MochiShiba", {
  
  template: `
    <div class="MochiShiba /" :class="styleClass">
      <svg class="shiba" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152" height="174" viewBox="0 0 152 174">
        <title>Mochi Shiba</title>
        .
        .
        .
      </svg>
    </div>
  `,
  props: {
    size: { type: String, default: "medium" },
    shiba: { type: String, default: "okaka" },
    mood: { type: String, default: "" },
    leftEye: { type: String, default: "open" },
    rightEye: { type: String, default: "open" },
    leftEar: { type: String, default: "up" },
    rightEar: { type: String, default: "flat" },
    blush: { type: Boolean, default: false }
  },
  computed: {
    ears: function() {
      let l = "l4";
      let r = "r4";
      if ( this.leftEar === "up" ) { l = "l1"; }
      else if ( this.leftEar === "down" ) { l = "l3"; }
      else if ( this.leftEar === "flat" ) { l = "l2"; }
      if ( this.rightEar === "up" ) { r = "r1"; }
      else if ( this.rightEar === "down" ) { r = "r3"; }
      else if ( this.rightEar === "flat" ) { r = "r2"; }
      return `/ ears ${l} ${r}`;
    },
    eyes: function() {
      if ( this.leftEye === this.rightEye ) {
        return `/ eyes ${this.leftEye}`;
      } else {
        return `/ eyes l${this.leftEye} r${this.rightEye}`;
      }
    },
    cheeks: function() {
      return this.blush ? "/ blush" : "";
    },
    styleClass: function() {
      return `${this.size} / ${this.mood} ${this.eyes} ${this.ears} ${this.cheeks}`;
    }
  },
  methods: {},
});

Micro Interactions

Andreas Storm

Non standard UI elements

Chris Gannon

Logos

Animated logos

Gray Ghost

Koto Furumiya

D ima Vishnevetsky

Media queries

media queries embed within the SVG file, work from the SVGs viewport size.

https://svgontheweb.com/#mediaqueries

👉

Text effects

ART

ART

Andrew Wang‑Hoyer

Gunner animation & illustration studio

Loaders

Line drawing

Filters & effects

Interactive Infographics

Krutie Patel

Interactive stuff

Josh

React to mouse events based on shapes

Tiffany Brown

Marcin

Be creative with background image

Dima Vishnevetsky

Be creative with favicons

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔥</text></svg>">

Browsers started supporting SVG for favicons

Chris Coyier