Scalable ue graphics for the modern web

😉

Who used SVG before?

Please raise your hands

✋

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

👉

Who used SVG for anything besides Icons?

Please raise your hands

✋

We all know we can use SVG for graphics and illustrations

https://www.humaaans.com

👉

Who used SVG for anything else?

Please raise your hands

✋

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

Media Developer Expert @ Cloudinary

#HackathonMentor

VueJS Israel community leader

Public speaker

UX / UI Designer

Consultant

Lecturer

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?

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

Import SVG with webpack

Use SVG sprites with <symbol> and <use>

Wait a minute

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