Eric Katz
Web Developer based in Columbus, OH.
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.
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>
Proliferation of Mobile Devices
Device Sizes / Dimensions
Increased Pixel Density
Device Sizes / Dimensions
Rendered Sizes / Resolutions
* list of many devices, ppi/phys/pixel resolutions: http://mydevice.io/devices/
Increased Pixel Density
* imac svg from http://www.apple.com/imac-with-retina/
Browser Support
BREAK UP WITH IE8
http://breakupwithie8.com/
http://caniuse.com/#feat=svg
Browser Support
- Good for complimenting existing icon sets/fonts process.
- Browser caching of font file.
Some Fallbacks
create the perfect SVG forthe web,your developer,yourself
.. save as '.svg'
- Organize work files into semantically named layers and layer groups.
- Don't Try not to embed images in your SVG.
optimize the perfect SVG
Use a build task manager
- 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>
....
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
<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
<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>
<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>
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!
SPA Interface UI
"Flashy" User Interfaces
By Eric Katz
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