Skip to content

Latest commit

 

History

History
571 lines (417 loc) · 14.6 KB

slides.md

File metadata and controls

571 lines (417 loc) · 14.6 KB
Raw
theme class highlighter lineNumbers info drawings download layout title
./theme
text-center
prism
true
## Slides for Intro to SVG L&L
persist
true
intro
Intro to SVG

Intro to SVG

Let's start

layout: presenter presenterImage: 'https://pbs.twimg.com/profile_images/1441783883456942080/vV37mSqv_400x400.jpg'

Estee Tey

  • 💻 Grad Software Developer at Thoughtworks
  • ✏ Writes about Web Dev, UI, Dev growth
  • 🎨 Experienced in creating mockups & graphics

Expectations

No Prerequisites

expect(target_audience).toBeAny()

Your time to be worth it

expect(🍚⏱).toYield(✅)

Learn something

expect(🧠).toIncrease();

Have fun thinking

expect(🤔).andThen(😄)

Table of Contents

  1. What is SVG?
  2. Why do we use SVG?
  3. How do we get SVG?
  4. How to use SVG?

layout: center class: text-center

What is SVG?

layout: center class: text-center

Images

Story Time!

---

Raster vs Vector Images

raster vs vector images

Image File Types

File Extension Description
.gif Graphics Interchange Format
.png Portable Network Graphic
.jpg / .jpeg Image format by Joint Photographic Experts Group
.webp A superior image format of .png & .jpg
.svg Scalable Vector Graphics

Image File Types

File Extension Color Modes Compression Usage
.gif Indexed Color Lossless Animated images
.png Greyscale, True Color, Alpha Lossless (better than .GIF) Static Line art, iconic graphics where transparency matters.
.jpg / .jpeg True Color Lossy Photographs, realistic images of people, venues etc.
.webp Depends on compression Lossless / Lossy A superior image format of .png & .jpg
.svg Anything that can be specified using CSS color syntax. NA UI that requires to be redrawn accurately at different sizes

How to get SVG

  1. Create SVG from scratch
  2. Generate SVG
  3. Extract from websites

layout: center class: text-center

Create SVG with 3 basic elements

<rectangle />

<circle />

<polygon />

Code Time!

Create SVG with 3 simple shapes in code

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

JP flag in SVG

<svg>
    <rect width="100%" height="100%" fill="white" />
    <circle cx="50%" cy="50%" r=60 fill="#BC002D" />
</svg>

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

TH flag in SVG

<svg>
    <rect width="100%" height="20%" y="0" fill="red" />
    <rect width="100%" height="20%" y="20%" fill="white" />
    <rect width="100%" height="20%" y="40%" fill="blue" />
    <rect width="100%" height="20%" y="60%" fill="white" />
    <rect width="100%" height="20%" y="80%" fill="red" />
</svg>

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

VN flag in SVG

<svg>
  <defs>
    <polygon id="star" fill="yellow"
      points="100,10 40,198 190,78 10,78 160,198" />
  </defs>
  <rect width="100%" height="100%" fill="red" />
  <svg viewBox="100 0 600 600" x="25%" y="25%">
    <use href="#star">
    </use>
  </svg>
</svg>

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

Polygon vs Polyline

<polygon points="100,10 40,198 190,78 10,78 160,198" fill='#abcbca' stroke='#123123' stroke-width='5'  />
<polyline points="100,10 40,198 190,78 10,78 160,198"  fill='#abcbca' stroke='#123123' stroke-width='5'  />

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

SG flag in SVG

<svg>
  <rect width="100%" height="50%" fill="red" />
  <rect width="100%" height="50%" y="50%" fill="white" />
  <circle cx='15%' cy='25%' r='30' fill='white' />
  <circle cx='20%' cy='25%' r='30' fill='red' />
  <svg viewBox="600 -100 1000 1800">
    <use href="#white-star" />
    <use href="#white-star" x="-20%" y="10%" />
    <use href="#white-star" x="20%" y="10%" />
    <use href="#white-star" x="-12.5%" y="22%" />
    <use href="#white-star" x="12.5%" y="22%" />
  </svg>
</svg>
--- layout: center class: text-center ---

Create SVG with Design Tools

layout: center class: text-center

Figma Demo

Ellipse, Polygon, Paths, Bezier Curves

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

Setting SVG File as an image source

<img src="/svg/animals/Rabbit.svg"/>

layout: new-section logoHeader: '/intro-to-svg-slides/terminal-box-fill.svg'

Setting SVG File as an image source

<img src="/svg/animals/Rabbit.svg" 
  class="special-image" />
.special-image {
  height:240px; 
  animation:spin 4s linear infinite;
}

@keyframes spin { 
  100% {
      transform:rotate(360deg); 
  } 
}
<style> .special-image { height:240px; animation:spin 4s linear infinite; } @keyframes spin { 100% { transform:rotate(360deg); } } </style>

Generate SVG

1. Squicley for generating Squircles

Generate SVG

2. SVGBackgrounds.com for generating backgrounds

Extract from websites

Demo with Hacktoberfest's SVG

P.S. If you use any extracted images for your own websites or apps, please remember to give attribution.

Bonus: Optimization of SVG

SVGOMG

Bonus for React Devs: convert from SVG to JSX

SVG to JSX Demo

Summary

  1. What is SVG?
  2. Why do we use SVG?
  3. How do we get SVG?
  4. How to use SVG?

SVG Element Cheatsheet

Shape Usage Example
1. Square <rect width="40" height="40" />
2. Rectangle <rect width="80" height="40" />
3. Circle <circle cx="50%" cy="50%" r="60" />
4. Ellipse <ellipse cx="100" cy="50" rx="80" ry="40" />
5. Polygon <polygon points="100,10 40,198 190,78 10,78 160,198" />
6. Polyline <polyline points="100,10 40,198 190,78 10,78 160,198" />

Topics for you to explore more

  • More complex SVG elements such as patterns, filters, paths
  • Accessibility of SVGs
  • Performance of SVGs

More Resources

Thank you!

Hope you enjoyed the L&L 😄

Any questions?

--

Feedback form