Handling SVGs

From pponent to c mponent

@mayashavin

Maya Shavin

console.log(Maya)

Senior Frontend Developer at Cloudinary

Core Maintainer of StorefrontUI

Organizer of Vuejs Israel

Nuxt.js Ambassador

Blogger

Bookworm

mayashavin

https://mayashavin.com

@mayashavin

mayashavin

What is SVG?

@mayashavin

mayashavin

Scalable
Vector
Graphics

@mayashavin

<ellipse rx="150" ry="150" cx="150" cy="150" fill="rgb(241, 194, 50)" />

<svg>
  <path fill="#8899A6" d="M6 10l3 23c0 1.657 4.029 3 9 3s9-1.343 9-3l3-23H6z"></path>
  <path fill="#D3A471" d="M7 10l3 22.644c0 1.243 3.582 2.25 8 2.25s8-1.007 8-2.25L29 10H7z"></path>
  <path fill="#CCD6DD" d="M27.756 19.538L29 10H7l1.244 9.538z"></path>
  <path fill="#E1E8ED" d="M25.982 19.538L27 10H9l1.018 9.538z"></path>
  <ellipse fill="#ECD2A7" cx="18" cy="19.455" rx="9.764" ry="2.355"></ellipse>
  <path fill="#AA8DD8" d="M21.836 19.144l1.627-18.067l-2.988-.27l-1.651 18.337z"></path>
  <path fill="#55ACEE" d="M5.696 10.003c-.179 1.05-.162 2.363.413 2.527c.46.132 1.104-.09 
                          1.639.177c.535.267.963.965 1.506 1.151c1.04.356 1.678-.299 
                          2.303-.221c1.188.148 1.721 1.284 2.702 1.373c.98.089 1.781-.738 
                          2.701-.709c.984.032.936.767 2.48.797c1.516.029 1.766-.959 
                          2.657-1.019c.891-.059 1.471.547 2.303.399c.832-.149 1.177-1.017 
                          1.86-1.196c.683-.178 1.045.326 1.639.177c.594-.148.907-1.17 
                          1.264-1.438c.356-.267 1.571 1.26 1.277-1.663c-.536-5.328-19.
                          13-.563-20.882-.681c-1.753-.119-3.491-1.845-3.862.326z" />
  <ellipse fill="#88C9F9" cx="18" cy="10.011" rx="12.35" ry="3.8"></ellipse>
  <path fill="#9266CC" d="M23.463 1.077L20.475.808l-.853 9.474c-.001.007-.006.013-.006.019c0 
                          .276.672.5 1.5.5s1.5-.224 1.5-.5V10.3h.017l.83-9.223z"/>
  <path fill="#553788" d="M23.463 1.077c-.025.275-.714.438-1.539.363c-.825-.074-1.474-
                          .358-1.449-.633c.025-.275.714-.438 1.539-.363s1.474.358 1.449.633z" />
  <ellipse fill="#AA8DD8" cx="20.314" cy="19.19" rx="1.5" ry=".5"></ellipse>
  <g fill="#292F33">
    <!=...=>
  </g>
 </svg>

@mayashavin

mayashavin

SVG

GIF, PNG, JPG, etc.

@mayashavin

mayashavin

Paths (Vectors)

Shapes

Text elements

Fixed dimension

BUT...

@mayashavin

mayashavin

BUT...

We are still not comfortable in using SVGs

@mayashavin

mayashavin

#1 "BUT"

We can use HTML & CSS to build graphics

#2 "BUT"

No single standard that matches all

@mayashavin

mayashavin

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,
            },
          },
        ],
      },
    ],
  },
  ...
};

<template>
  <nav>
    <a href="https://github.com/webpack/webpack"
       arial-label="Webpack">
      <WebpackLogo />
    </a>
  </nav>
</template>
<script>
import WebpackLogo from './static/webpack.svg';
 
export default {
  name: 'SVG Example',
  components: {
    WebpackLogo,
  },
};
</script>

React-SVG-loader

Vue-SVG-Loader

import WebpackLogo from './static/webpack.svg';

const () => (
 <WebpackLogo width={50} height={50}/>
)

@mayashavin

mayashavin

<body>
  <svg style="display: none">
    <symbol viewBox="0 0 32 32" id="heart-icon">
    </symbol>
  </svg>
  <svg width="24px" height="24px">
    <use xlink:href="#heart-icon"></use>
  </svg>
</body>

SVG Sprites

with <symbol> and <use>

@mayashavin

mayashavin

export const mail = {
  path: [
    `M11.8125 9.8125H2.1875C1.46289 9.8125 0.875 9.22461 0.875 8.5V1.5C0.875 
    0.775388 1.46289 0.1875 2.1875 0.1875H11.8125C12.5371 0.1875 13.125 
    0.775388 13.125 1.5V8.5C13.125 9.22461 12.5371 9.8125 11.8125 9.8125ZM2.1875 
    1.0625C1.94578 1.0625 1.75 1.25828 1.75 1.5V8.5C1.75 8.61594 1.79594 8.7275 
    1.87797 8.80953C1.96 8.89156 2.07156 8.93749 2.18749 8.93749H11.8125C11.9284 
    8.93749 12.04 8.89156 12.122 8.80953C12.2041 8.72749 12.25 8.61593 12.25 
    8.5V1.5C12.25 1.38406 12.2041 1.2725 12.122 1.19047C12.04 1.10844 11.9284 
    1.06251 11.8125 1.06251L2.1875 1.0625Z`,
    `M7.00088 5.21008C6.71158 5.21063 6.42995 5.11492 6.20025 4.93883L1.33959 
    1.19817C1.14763 1.05051 1.111 0.775439 1.25865 0.583485C1.40631 0.391531
    1.68138 0.354893 1.87334 0.502549L6.734 4.24321C6.8915 4.36407 7.11025 
    4.36407 7.26775 4.24321L12.1284 0.502549C12.3204 0.354891 12.5954 0.391533 
    12.7431 0.583485C12.8907 0.775438 12.8541 1.05051 12.6622 1.19817L7.80149 
    4.93883C7.57181 5.11492 7.29017 5.21062 7.00086 5.21008H7.00088Z`
  ],
  viewBox: '0 0 24 24'
}

JSX Component


<icon path={mail.path} viewBox={mail.viewBox} />

export const icon = ({ viewBox, path, size }) => (
  <svg 
    viewBox={viewBox}
    width={size} 
    height={size} 
    style="fill: currentColor;"
  >
    { path.forEach(d => (
      <path d={d} />
    )}
  </svg>
)

@mayashavin

mayashavin