NUTHIN’ BUT AN SVG THANG

The SPEAKER

 

Eric Katz is a full stack developer and consultant and has been making awesome web browser things in HTML, CSS, and Javascript since 2003.

 

He enjoys crafting compelling and attractive user interfaces while experimenting with new HTML/CSS feature implementations and developing best practices.

Scalable VECTOR GRAPHICS

VS

            <?xml ?>
        
            <svg>
        
<path d="M4,50 01 c10,4 41,4 ... " />
        
<rect x="10" y="10" width="60" height="10" />
        
  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

WHY SVG? WHY NOW?

3 4 5 6 6+
Proliferation of Mobile Devices

Device Sizes / Dimensions

3 4 5 6 6+
Increased Pixel Density
        

Device Sizes / Dimensions

Rendered Sizes / Resolutions

* list of many devices, ppi/phys/pixel resolutions: http://mydevice.io/devices/

Increased Pixel Density
        
1080p HD 4K 4K 5K

* imac svg from http://www.apple.com/imac-with-retina/

WHY SVG? WHY NOW?

Browser Support
        

BREAK UP WITH IE8

http://breakupwithie8.com/

http://caniuse.com/#feat=svg

Browser Support

ICONFONTS

Use SVGs to create your own icon font sets with icomoon or fontello.
- Good for complimenting existing icon sets/fonts process.
- Browser caching of font file.

FALLBACKS

Some Fallbacks

HOW TO

create the perfect SVG 
for the web, your developer, yourself

.. save as '.svg'

  • Adobe Illustrator
  • Adobe Photoshop
  • Sketch
  • Inkscape
  • Google Docs
  • Apache Batik

- Organize work files into semantically named layers and layer groups.

- Don't Try not to embed images in your SVG.

HOW TO

            optimize the perfect SVG
        

Use a build task manager

  • Gulp
  • Grunt

- Don't be afraid to dive into the .svg file and re-organize.

 

- Make your life easier, create your own <g>'s remove or add ids and  classes for styling or selecting.

 

- Add contextual comments a la,

<!-- explaination -->

GUIs

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1284px" height="785px" viewBox="0 0 1284 785" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
    <title>experiment</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="laboratory" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="experiment" sketch:type="MSLayerGroup">
            <g id="tabletop" transform="translate(125.000000, 425.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
                <path d="M0,0 L1016,0 L1016,45 L0,45 L0,0 Z" id="Fill-7"></path>

....

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="360px" height="334.99px" viewBox="0 0 360 334.99" enable-background="new 0 0 360 334.99" xml:space="preserve">
<g id="Layer_2" display="none">
	<g id="O3btSA_1_" display="inline">
		
			<image overflow="visible" enable-background="new    " width="190" height="225" id="O3btSA_2_" xlink:href="FD4F815BC2522FA9.jpeg"  transform="matrix(1.8929 0 0 1.8844 0.1777 -0.7471)">
		</image>
	</g>
</g>
<g id="Layer_1_1_">
	<g>

....

Clean UP

USING SVG

You can use them the same way you use other images.
<img src="demo.svg" alt="demonstration">
.logo {
    background: url('demo.svg') no-repeat 0 0;
}

In HTML

In CSS

LEVEL 1

<svg width="1284" height="785" viewBox="0 0 1284 785" xmlns="http://www.w3.org/2000/svg">
    <g id="Laboratory" fill="none" fill-rule="evenodd">
        <g id="experiment">
            <g id="tabletop">
                <path d="M125 425h1016v45H125v-45z" />
                <path d="M178 470h32v314.94h-32V470z" />
                <path d="M1069 470h32v314h-32V470z" />
            </g>
            <g id="florence-flask">
                <path d="M335.093 338.377c-4.127-4.82-10.25-7.877-17.093-7.877-7.866 0-14.782 4.04-18.803 10.155 11.992 5.402 23.87 1.796 35.896-2.278" id="Fill-28" fill="#35468A"/>
                <path d="M328.647 344.738c-10.778 3.216-21.328 4.05-31.35-.553-1.127 2.648-1.764 5.554-1.792 8.607 14.418-4.588 29.914 4.332 44.617 4.303.244-1.33.378-2.696.378-4.095 0-4.085-1.094-7.91-2.996-11.213-2.948 1.036-5.894 2.066-8.857 2.95" id="Fill-29" fill="#27366C"/>
                <path d="M326.367 359.302c-9.91-2.27-20.74-5.982-30.523-2.4 1.848 10.565 11.06 18.598 22.156 18.598 9.588 0 17.77-6 21.01-14.45-4.18-.096-8.423-.78-12.643-1.748" id="Fill-30" fill="#161D37"/>
                <g id="bubbles" fill="#fff">
                    <path d="M329.69 349.728c0 1.807-1.466 3.272-3.273 3.272-1.807 0-3.273-1.465-3.273-3.272 0-1.807 1.466-3.272 3.273-3.272 1.807 0 3.272 1.465 3.272 3.272" id="Fill-31"/>
                    <path d="M316.69 336.728c0 1.807-1.466 3.272-3.273 3.272-1.807 0-3.273-1.465-3.273-3.272 0-1.807 1.466-3.272 3.273-3.272 1.807 0 3.272 1.465 3.272 3.272" id="Fill-32"/>
                </g>
            </g>
        </g>
    </g>
</svg>

In HTML .. again but inline

Or Paste directly into html
#florence-flask path {
    fill: #000;
    stroke: green;
}

#bubbles path {
    stroke: rgba(200,200,0,0.5);
    stroke-width: 3px;  
}

and add further styling/properties with CSS

LEVEL 2

<svg width="80px" height="30px" viewBox="0 0 80 30"
    xmlns="http://www.w3.org/2000/svg">

    <defs>
        <linearGradient id="Gradient01">
            <stop offset="20%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="60" height="10" 
        fill="url(#Gradient01)"  />
</svg>

In body of SVG we can add definitions to use later, including: gradients, patterns, filters, groups ... more

and more?!
<svg width="120px" height="120px" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <pattern id="Triangle" 
            width="10" height="10" 
            patternUnits="userSpaceOnUse">
            <polygon points="5,0 10,10 0,10"/>
        </pattern>
    </defs>

    <circle cx="60" cy="60" r="50" 
        fill="url(#Triangle)"/>
</svg>

LEVEL 3

<svg width="55" height="72" viewBox="0 0 55 72" xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <defs>
    <!-- flask -->
    <symbol id="flask">
        <path d="M42 3c0 1.657-1.343 3-3 3H15c-1.657 0-3-1.343-3-3s1.343-3 3-3h24c1.657 0 3 1.343 3 3M26.926 31.906c4.34 1.364 9.3 1.5 13.324-.306V13.4c0-2.43-1.97-4.4-4.4-4.4h-16.2c-2.43 0-4.4 1.97-4.4 4.4v15.034c4.04-.35 7.273 2.09 11.676 3.472" fill="#333333"/>
        <path d="M9.322 47.353c6.848-.307 13.074 3.877 20.332 4.98 5.98.91 12.872.434 17.115-3.434l-5.347-13.367c-2.137.875-4.494 1.323-7.002 1.318-3.417-.01-6.646-.32-9.832-1.6-3.104-1.246-6.03-3.46-9.34-2.85v.2c0 .4.07.78.17 1.146L9.322 47.353" fill="#333333"/>
        <path d="M48.348 52.844c-2.817 2.135-6.37 3.387-10.24 3.734-4.215.378-8.59.08-12.68-1.066-5.985-1.68-11.843-5.498-18-3.928L.25 67.6c0 2.43 1.97 4.4 4.4 4.4h45.2c2.43 0 4.4-1.97 4.4-4.4l-5.902-14.756" fill="#333333"/>
    </symbol>
    <!-- syringe -->
    <symbol id="syringe">
        <path d="M42 3c0 ... "/>
        <path d="M42 3c0 ... "/>
        <path d="M42 3c0 ... "/>
        <circle cx="60" cy="60" r="50" />
    </symbol>
  </defs>
</svg>

Create an SVG Sprite Map

<svg viewBox="0 0 550 72" width="550" height="144">
  <use xlink:href='#flask' />
  <use xlink:href='#syringe' x=100 />
</svg>

LEVEL 3 ... continued

if inline sprite map, then just reference #id

<svg>
    <use xlink:href="/path/to/laboratory.svg#flask" />
</svg>

<svg>
    <use xlink:href="/path/to/laboratory.svg#syringe" />
</svg>

otherwise use external url (needs IE polyfill)

We can start dynamically altering the make up of our SVG.

            JavaScript!
        

LEVEL 9001

IN THE WILD

           
Polygon - Playstation 4 Review
           

       

IN THE WILD

SPA Interface UI

IN THE WILD

"Flashy" User Interfaces

Still confused!?

CWG: Nuthin' but an SVG thang

By Eric Katz

CWG: Nuthin' but an SVG thang

This presentation is all about beautiful ways to bring rich graphical content into your web projects with Scalable Vector Graphics (SVG). SVG isn't the newest technology on the web but it's seeing a huge rise in popularity. Today, SVG adoption can be seen in almost every aspect of front end development. UX components like scalable icons, animated graphics, image filters, image clipping and data visualization can all be built utilizing SVG. This presentation will go on a journey through recent trends and popular use-cases of SVG and will maneuver through SVG implementation examples, brief structure analysis, ideal workflow, optimization and best practices. Video: https://www.youtube.com/watch?v=Inkv-D8NPSo

  • 2,234
Loading comments...

More from Eric Katz