From pponent to c mponent
Senior Frontend Developer at Cloudinary
Core Maintainer of StorefrontUI
Organizer of Vuejs Israel
Nuxt.js Ambassador
Blogger
Bookworm
<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>
Paths (Vectors)
Shapes
Text elements
Fixed dimension
We are still not comfortable in using SVGs
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>
import WebpackLogo from './static/webpack.svg';
const () => (
<WebpackLogo width={50} height={50}/>
)
<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>
with <symbol> and <use>
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'
}
<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>
)
Scalability
Editable & scriptable
Animate-able (CSS and/or JS)
Accessible
Smaller in size
Interactively
Readable
Less CSS-depending for colors
Semantically correct (image)
Ease of use
Probably after you read this book 👉
What scenarios?
Choose the most comfortable implementation for SVG usage
Logo & Icons - Think SVG first
Take a course with Sarah Drasner 😝