SVG's & SASS - SASS-TO Meetup January 2015

sass-to-svg.md

SASS-TO SVG & SASS - January 2015

Introductions

• What's your focus / work?
• What was the last thing you found challenging/frustrating in SASS

#SVG with SASS and Gulp#

Let's start downloading stuff during intro...

##Setup prerequisites##

Install Xcode CLI

xcode-select --install

Install node.js from binary

Download from http:// node.js

###Download Demo Project ###

Current: http://bit.ly/sassto-4-demo

There's 1 line of PHP in there... We can avoid with a crappy "copy 'n paste" if you can't get PHP working locally.

Bundler (optional kinda - but USE BUNDLER)

Open terminal and cd to your root project folder.

$ (sudo) gem install bundler $ bundle install --path vendor/bundle

Test it works... $ bundle exec compass watch

Install Node Packages

sudo npm install -g gulp
$ (sudo) npm install

Test it works...

SVG overview

They just text files!

• Retina Proof
• Scaleable
• 1 request (is the goal)

I thought I'd be showing this article's technique but it doesn't work (one of the packages is outdated)

How to export from illustrator http://demosthenes.info/blog/823/SVG-Export-Settings-For-Adobe-Illustrator

So my original plan didn't work so well...

https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/

Option #1 - Inline your SVG as image backgrounds in you CSS File

Look at these folders

index.php sass/compontents/_icon-css-svg.scss images/css-svg-source <<Our source svg icons
images/css-svg-min <<Minified versions

• SVG's are added as backgrounds to CSS with inline-image compass function
• It's important to use these as placeholders so you only import the image data 1 time
• The more images you add the slower your compile time
• Each color variation needs to be duplicated = bloat.

What's in the gulp file

https://github.com/twistdigital/gulp-svgo (crap looks like it's depricated... Anyways you get the idea - Optimize your SVG before using them)

Run...

gulp svg-min

Further Details

// SVG as inline background images http://www.filamentgroup.com/lab/grumpicon-workflow.html

Option #2 - SVG Sprite injected in the HTML DOM

Look at these folders

index.php sass/compontents/_icon-inline-svg.scss images/svg-source <<Our source svg icons
images/svg-sprite <<Minified versions

Cross Browser Compatibility

https://github.com/jonathantneal/svg4everybody

Was added to before the closing [body]> tag

Step 1 - Minify the SVG's

(nothing new here execept the command in chained in gulp

Step 2 - Combine all the SVG's into 1 big svg with wrapping each icon

Run...

gulp svg-sprite

images/svg-source/*.svg into this file... images/svg-sprite/sprite.svg

Step 3 - Inject the SVG sprite into the HTML head###

• Chris Coyier reported the svg must be the 1st tag after the head

If you can't run PHP for index.html...

If you can't run index.php just rename to .html and copy the svg spite on top of

/index.php

<?php include_once("images/svg-sprite/sprite.svg"); ?>

repaced with images/svg-sprite/sprite.svg

Step 4 - Use SVG as images where you want icons with

<a href="#" class="link-red">
  <svg class="icon--inline-svg"><title>Facebook</title><use xlink:href="#facebook" /></svg>
Ipad help!</a>

Step 5 - Color with CSS!

Further Details

http://css-tricks.com/svg-symbol-good-choice-icons/ http://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ https://kartikprabhu.com/article/inline-svg-icons