Scalable ue graphics for the modern web

😉

Dima Vishnevetsky

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

👨‍💻 Front End Architect

💚 VueJS Israel community leader

💼 Consultant

📐 UX / UI Designer

🖼 Media Developer Expert @ Cloudinary

👨‍🏫 #HackathonMentor

🎓 Lecturer

🗣 International Tech speaker

https://vuejs.org/v2/cookbook/editable-svg-icons.html

👉

The first place we encounter SVG in relation to Vue is directly in the documentation

Thanks, Sarah Drasner for that nice example

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 Vue component feels so natural

Why I love SVG + Vue?

Vue supports SVG out of the box
SVG, like HTML, is XML-based, so we can apply Vue's reactivity system to SVG and make it interactive in the same easy and convenient way as we do with HTML templates

SVG and Vue make the perfect match

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

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