Highly recommended Summer Environmental Leadership Program for students:

Do you want to learn how to make change through organizing? Sprog is a program run across the country that will give you the skills and the confidence to make the change you want to see in the world. Apply at http://ssc.wearepowershift.org/sprog!

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Why use SVG at all?

• Small file sizes that compress well
• Scales to any size without losing clarity (except very tiny)
• Looks great on retina displays
• Design control like interactivity and filters

Getting some SVG to work with

Design something in Adobe Illustrator. Here's a Kiwi bird standing on an oval.

Notice the artboard is cropped up right agains the edges of the design. Canvas matters in SVG just like it would in PNG or JPG.

You can save the file directly from Adobe Illustrator as an SVG file.

As you save it, you'll get another dialog for SVG Options. I honestly don't know much about all this. There is a whole spec for SVG Profiles. I find SVG 1.1 works fine.

The interesting part here is that you can either press OK and save the file, or press "SVG Code..." and it will open TextEdit (on a Mac anyway) with the SVG code in it.

Both can be useful.

Using SVG as an <img>

If I save the SVG to a file, I can use it directly in an <img> tag.

<img src="kiwi.svg" alt="Kiwi standing on oval">

In Illustrator, our artboard was 612px ✕ 502px.

That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. Here's an example of that:

Check out this Pen!

Browser support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.

If you'd like to use SVG, but also neeed to support these browsers that don't support using SVG in this way, you have options. I've covered different techniques in different workshops I've done.

One way is to test for support with Modernizr and swap out the src of the image:

if (!Modernizr.svg) {
      $(".logo img").attr("src", "images/logo.png");
    }

David Bushell has a really simple alternative, if you're OK with JavaScript in the markup:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy can also help. We'll cover more fallback techniques as this article progresses.

Using SVG as a background-image

Similarly easy to using SVG as an img, you can use it in CSS as a background-image.

<a href="/" class="logo">
      Kiwi Corp
    </a>

.logo {
      display: block;
      text-indent: -9999px;
      width: 100px;
      height: 82px;
      background: url(kiwi.svg);
      background-size: 100px 82px;
    }

Notice we set the background-size to the size of the logo element. We have to do that otherwise we'll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use a background-size keywords like contain if you want to make sure the image will fit and can't know the parent image will be of the exact right size.

Browser support

Using SVG as background-image has its own special set of browser support, but it's essentially the same as using SVG as img. The only problem browsers are IE 8 and down and Android 2.3 and down.

Modernizr can help us here, and in a more efficient way than using img. If we replace the background-image with a supported format, only one HTTP request will be made instead of two. Modernizr adds a class name of "no-svg" to the html element if it doesn't support SVG, so we use that:

.main-header {
      background: url(logo.svg) no-repeat top left;
      background-size: contain;
    }
    
    .no-svg .main-header {
      background-image: url(logo.png);
    }

The problem with both <img> and background-image...

Is that you don't get to control the innards of the SVG with CSS like you can with the following two ways. Read on!

Using "inline" SVG

Remember how you can grab the SVG code right from Illustrator while saving if you want? (You can also just open the SVG file in a text editor and grab that code.) You can drop that code right into an HTML document and the SVG image will show up just the same as if you put it in an img.

<body>
    
       <!-- paste in SVG code, image shows up!  -->
    
    </body>

This can be nice because the image comes over right in the document and doesn't need to make an additional HTTP request. In other words, it has the same advantages as using a Data URI. It has the same disadvantages too. A potentially "bloated" document, a big chunk of crap right in the document you're trying to author, and inability to cache.

If you're using a back end language that can go fetch the file and insert it, at least you can clean up the authoring experience. Like:

<?php include("kiwi.svg"); ?>

Optimize it first

Likely not a huge shocker, but the SVG that Adobe Illustrator gives you isn't particularly optimized. It has a DOCTYPE and generator notes and all that junk. SVG is already pretty small, but why not do all we can? Peter Collingridge has an online SVG Optimiser tool. Upload the old, download the new. In Kyle Foster's video, he even takes it the extra mile and removes line breaks after this optimization.

If you're even more hardcore, here is a Node JS tool for doing it yourself.

Now you can control with CSS!

See how the SVG looks a lot like HTML? That's because they are both essentially XML (named tags with angle brackets with stuff inside). In our design, we have two elements that make up the design, an <ellipse> and an <path>. We can jump into the code and give them class names, just like any other HTML element can have.

<svg ...>
      <ellipse class="ground" .../>
      <path class="kiwi" .../>
    </svg>

Now in any CSS on this page we can control those individual elements with special SVG CSS. This doesn't have to be CSS embedded in the SVG itself, it can be anywhere, even in our global stylesheet <link>ed up. Note that SVG elements have a special set of CSS properties that work on them. For instance, it's not background-color, it's fill. You can use normal stuff like :hover though.

.kiwi {
      fill: #94d31b; 
    }
    .kiwi:hover {
      fill: #ace63c; 
    }

Even cooler, SVG has all these fancy filters. For instance blurring. Chuck a filter in your <svg>:

<svg ...>
      ...
      <filter id="pictureFilter" >
        <feGaussianBlur stdDeviation="5" />
      </filter> 
    </svg>

Then you can apply that in your CSS as needed:

.ground:hover {
      filter: url(#pictureFilter);
    }

Here's an example of all that:

Check out this Pen!

• More on applying filters to SVG
• The best list I could find on SVG-specific CSS properties (specific to Opera)
• SVG filter effects playground (from Microsoft)

Browser support

Inline SVG has it's own set of browser support, but again, it's essentially only an issue in IE 8 and down and Android 2.3 and down¹.

One way to handle fallbacks for this type of SVG is:

<svg> ... </svg>
    <div class="fallback"></div>

Then use Modernizr again:

.logo-fallback { 
      display: none;
      /* Make sure it's the same size as the SVG takes up */
    }
    .no-svg .logo-fallback { 
      background-image: url(logo.png); 
    }

Using SVG as an <object>

If "inline" SVG just isn't your jam (remember it does have some legit drawbacks like being hard to cache), you can link to an SVG file and retain the ability to affect its parts with CSS by using <object>.

<object type="image/svg+xml" data="kiwi.svg" class="logo">
      Kiwi Logo <!-- fallback image in CSS -->
    </object>

For the fallback, Modernizr detection will work fine here:

.no-svg .logo {
      width: 200px;
      height: 164px;
      background-image: url(kiwi.png);
    }

This will work great with caching and actually has deeper support than using it any other way. But, if you want the CSS stuff to work, you can't use an external stylesheet or <style> on the document, you need to use a <style> element inside the SVG file itself.

<svg ...>
      <style>
        /* SVG specific fancy CSS styling here */
      </style>
      ...
    </svg>

External stylesheets for <object> SVG

SVG has a way to declare an external stylesheet, which can be nice for authoring and caching and whatnot. This only works with <object> embedding of SVG files as far as I've tested. You'll need to put this in the SVG file above the opening <svg> tag.

<?xml-stylesheet type="text/css" href="svg.css" ?>

If you put that in your HTML, the page will barf and not even try to render. If you link up an SVG file that has that in it as an <img> or background-image, it won't barf, but it won't work (the SVG will still render though).

Data URI's for SVG

A way to shrink SVG's even smaller is to convert them into Data URI's. Mobilefish.com has an online conversion tool for that. Simply paste in the contents of your SVG file and fill out the form and it will display the results in a textarea for you to copy. Remember to remove line breaks in the data it gives you back. It looks like pure gibberish:

You can use that anywhere we've talked about so far (except inline <svg> because that just doesn't make sense) Just put the gibberish where it says [data] in these examples.

As <img>

<img src="data:image/svg+xml;base64,[data]>

As CSS

.logo {
      background: url(data:image/svg+xml;base64,[data]);
    }

As <object>

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
      fallback
    </object>

And yep, if you have an embedded <style> in your SVG before you base64 it, it will work if you use it as an <object> still!

For the hardcore, Filament group has grunticon for automating the process.

Command line thingy for base64ing SVG:

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) March 2, 2013

Or alternatively Mathias Bynens has some techniques:

Use openssl base64 < path/to/file.png | tr -d '\n' | pbcopy or cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy to skip writing to a file and just copy the base64-encoded output to the clipboard without the line breaks.

Related Stuff!

• David Bushell: A Primer to Front-end SVG Hacking
• David Bushell: Resolution Independence With SVG
• MDN on SVG
• Browser support for a variety of different SVG related things.
• Peter Gasston: Better SVG Sprites With Fragment Identifiers
• simuari: SVG Stacks
• SVG.js - "A lightweight library for manipulating and animating SVG."
• Emmet has an awesome way to get a data URI from an SVG right from your code editor.
• Compass has a helper for data URIs too.
• Adobe: Styling SVG
• Andrew J. Baker: Taming the SVG Beast
• Illustrator alternatives: Inkscape, Sketch
• Krister Kari: Dealing with SVG images in mobile browsers

Kyle Foster's An Optimized SVG Workflow, which is worth an embed:

... and the follow up + slides.

¹ And speaking of Android 2.3 browser, this. But if you absolutely have to support the native browser, this.

Using SVG is a post from CSS-Tricks

Each semester UMBC sets aside several days for partnering organizations to be showcased on campus. Through our Corporate Visibility Days program, organizations are given the opportunity to highlight themselves to the UMBC student body.  Traditional schedules include information sessions, career-related workshops,networking opportunities and lunch.

Held from 11:00 am - 2:00 pm, you do not need to attend the entire event, please stop by when you are able and stay for as long as you can!

** National Security Agency (NSA)
March 13 ~ 11:00 am - 2:00 pm
University Center 312

** Next Century Corporation
March 27 ~ 11:00 am - 2:00 pm
University Center 312

** Kennedy Krieger Institute
April 4 ~ 11:00 am - 2:00 pm
Commons 331

** Mitre Corporation
April 10 ~ 11:00 am - 2:00 pm
University Center 312

The following full-time positions have been posted within the past week to UMBCworks. Login to your account (via the link in the Jobs & Internships topic in myUMBC) and find details and application instructions as well as hundreds of other job postings! 

9256862 - Application Support Analyst - Brown Advisory
9256859 - Software Developer - RDA Corporation
9256860 - Product Support Representative - Brookes Publishing Company
9256840 - Financial Representative - Northwestern Mutual Financial Network
9256809 - Java Developer - i3 Analytics

FOR IMMEDIATE RELEASE:

CONTACT:

Kimberly Brown PhD

CEO Amethyst Ghana Limited

kabrown@amethysttech.com

+233509679051 or 001-443-543-5578

March 5, 2013

Amethyst Ghana Limited Is Now Operating In Ghana

Amethyst Ghana Limited (AGL) is based in Accra, Ghana and provides technical services and ICT implementation for quality and compliance to international standards in critical sectors including healthcare, agriculture, and manufacturing.   AGL provides expert value added services to assist with a specific compliance issue or provides comprehensive services that include program development, training, ICT integration, equipment service, and management. We have a multi-disciplined team which includes professional engineers, scientists, software developers, and experienced technicians who have a track record of delivering for critical programs in Africa.  AGL is supported by the U.S. based parent company, Amethyst Technologies, LLC an ISO 9001 and 17025 registered company which has been supporting the U.S. Federal government with its Malaria Initiative, lab strengthening programs, and global initiatives in quality and compliance to international standards in East Africa for four years.

AGL is a company with an unwavering focus on quality and specializes in integrating quality assurance innovatively into its client’s missions whether the end activity is improved patient treatment and safety to ISO standards, pharmaceutical manufacturing in accordance to GMP, research and development, safe and fresh food for rural communities, or implementation of ICT systems to support global health programs.  Comments from Amethyst’s partners in East Africa that attest to the quality of work and dedication to deliver include: “We value Amethyst’s capabilities in Tanzania and we intend to continue the relationship” , “ My opinion is that Amethyst Technologies provides an unique set of capabilities in Africa particularly in public health infrastructure development”. 

For more information, contact us by email at info@amethysttech.com or by telephone in the U.S.:  001-443-543-5576, in Ghana:   +233244573421.

Kimberly Brown, Ph.D.
CEO
Amethyst Technologies, LLC an ISO 9001:2008 company
"Changing the World One SOP, Software Application, Calibration, Validation, and Sustainable Lab at a time"

1450 S. Rolling Road
Suite 4.001
Baltimore, MD 21227
p. 443.543.5576 f. 443.543.5574
www.amethysttech.com

www.globaloutcomes.org

The following part-time positions have been posted within the past week to UMBCworks. Login to your account (via the link in the Jobs & Internships topic in myUMBC) and find details and application instructions as well as hundreds of other job postings!

9256822 - Line Cook - The Rumor Mill Fusion Bar & Restaurant
9256821 - Receptionist/Data Entry - Bill's Music House, Inc
9256790 - Technical Assistant - Baltimore County Police Department
9256773 - Sales Associate - Shrerwin Williams (Arbutus)

Let’s build a system for performing functional tests on web applications, using Selenium and PhantomJS. The resulting system will allow us to write easy test scenarios in JavaScript, and test those scenarios both in real browsers and a headless simulator.

Choosing Components

The obvious downside to Selenium is that it requires a full graphical desktop for any and all tests.

To begin, we have to choose a browser control or emulation engine to simulate an end-user. For a long time, the primary player in this field was Selenium, and it still is. Selenium allows for automated control of real browsers on real operating systems, which is its primary advantage: you can be absolutely certain that the tests represent reality as closely as possible.

The obvious downside to Selenium is that it requires a full graphical desktop for any and all tests. As a result, your tests can become slow. However, Selenium can be fantastic, if you have the necessary resources to set up virtual machines for different operating systems and connect it all together.

On the opposite end of the spectrum is PhantomJS: A small, but excellent project, running a WebKit engine with full JavaScript access, but without the graphical portion. PhantomJS is a cinch to set up, runs on any machine, and is significantly faster.

Selenium can now control PhantomJS in the same way that it does any other browser.

PhantomJS, being a full WebKit, covers 90% of your functional testing needs. After all, if your application runs in WebKit correctly, it’s likely that it will run correctly in other browsers. Obviously, this excludes Internet Explorer 6–8.

However, as your project becomes increasingly popular, that remaining 10% becomes a significant issue. If your functional testing suite is set up on PhantomJS directly, it would be a pain to rewrite the tests for Selenium.

Luckily, recently, near the tail end of 2012, we received a gift in the form of PhantomJS bindings to Selenium. In other words, Selenium can now control PhantomJS in the same way that it does any other browser.

Given that Selenium, itself, does not need any complicated setup and can run anywhere, we can use Selenium bindings to control PhantomJS and cover 90% of our testing needs. If you later need more powerful testing, you can set up extra browser connections to Selenium without changing a single line in your code.

Thus, our choice for browser engine are Selenium with PhantomJS.

Describing Tests

Selenium offers bindings in most popular programming languages, so we can choose a language according to our needs. This is perhaps the most controversial piece of this article: I consider JavaScript to be the best choice for describing functional tests for websites and web applications.

• No matter which back-end technology you use, your front-end will always use JavaScript (This applies even if you use a language that compiles down to vanilla JavaScript, like CoffeeScript or TypeScript.). As such, JavaScript will always be an understood language by at least one person on your team.
• Next, consider the possibility for your functional tests to be written by non-programmers. The popularity of JavaScript on the front-end, combined with expressiveness in the ability to create clear domain-specific languages, clearly allows more people to write functional tests.
• Lastly, it’s only natural to control a test browser with JavaScript, given that it is highly asynchronous, and is what we control the browser with on a daily basis.

Selenium bindings for JavaScript are called, webdriverjs. Although the project is less mature than officially supported drivers for Java, C#, Ruby and Python, it nevertheless already contains most of the functionality that we require.

Test running

For the purposes of this article, Mocha with Chai have been selected.

Finally, we need a test runner, or an application to run tests by name, and pretty-print the output, while noting how many tests succeeded or failed. This test runner should also offer an assertion library, which allows the coder to express if a test succeeds or fails.

The choice is absolutely free here. There are plenty of JavaScript test runners, but for the purposes of this article, Mocha with Chai have been selected. Mocha provides a considerable amount of flexibility, a wide variety of output formats, and the popular Jasmine-like syntax. Chai allows you to write descriptive BDD-like assertions.

Setup

Here’s the final stack that we’ll be using:

1. Mocha – test runner
2. Chai – assertion library
3. webdriverjs – browser control bindings
4. Selenium – browser abstraction and running factory
5. PhantomJS – fast headless browser

Node.js and npm

Because most of our stack is based on JavaScript, we need node.js and npm. Both of these are common tools in the community, and I’ll assume that you already have them set up. If you don’t, use the installer on the node.js website. Don’t worry; if anything goes wrong, there are plenty of Node install guides available around the web.

Mocha, Chai and webdriverjs

All three of these can be installed, using npm:

sudo npm install -g mocha chai webdriverjs
    

Alternatively, you can install them locally in the directory where your tests are located:

npm install mocha chai webdriverjs
    

Selenium

Download Selenium Server. It is distributed as a single jar file, which you run simply:

java -jar selenium-server-standalone-2.28.0.jar
    

As soon as you execute this command, it boots up a server to which your testing code will connect later on. Please note that you will need to run Selenium Server every time that you run your tests.

PhantomJS

Quick version

Use npm to install PhantomJS globally:

sudo npm install -g phantomjs
    

Other options

We require a fresh version of PhantomJS – at least 1.8. This means that packages provided by your package manager (apt-get, MacPorts, …) will most likely be outdated.

You can install using npm without a global installation, or using other methods manually. In this case, however, you will have to tell Selenium where you placed PhantomJS every time you run Selenium:

PATH="/path/to/node_modules/phantomjs/bin:$PATH" java -jar selenium-server-standalone-2.28.0.jar
    

Combining Everything

Now that we have all the pieces, we have to put everything together.

Remember: before running any tests, you have to run Selenium Server:

java -jar selenium-server-standalone-2.28.0.jar
    

Selenium will run PhantomJS internally; you don’t have to worry about that.

Now, we need to connect to Selenium from our JavaScript. Here’s a sample snippet, which will initiate a connection to Selenium and have a ready object to control our Selenium instance:

// Use webdriverjs to create a Selenium Client
    var client = require('webdriverjs').remote({
        desiredCapabilities: {
            // You may choose other browsers
            // http://code.google.com/p/selenium/wiki/DesiredCapabilities
            browserName: 'phantomjs'
        },
        // webdriverjs has a lot of output which is generally useless
        // However, if anything goes wrong, remove this to see more details
        logLevel: 'silent'
    });
    
    client.init();
    

Now, we can describe our tests and use the client variable to control the browser. A full reference for the webdriverjs API is available in the documentation, but here’s a short example:

client.url('http://example.com/')
    client.getTitle(function(title){
        console.log('Title is', title);
    });
    client.setValue('#field', 'value');
    client.submitForm();
    client.end();
    

Let’s use the Mocha and Chai syntax to describe a test; we’ll test some properties of the example.com web page:

describe('Test example.com', function(){
        before(function(done) {
            client.init().url('http://example.com', done);
        });
    
        describe('Check homepage', function(){
            it('should see the correct title', function(done) {
                client.getTitle(function(title){
                    expect(title).to.have.string('Example Domain');
                    done();
                });
            });
    
            it('should see the body', function(done) {
                client.getText('p', function(p){
                    expect(title).to.have.string(
                        'for illustrative examples in documents.'
                    );
                    done();
                })
            });
        });
    
        after(function(done) {
            client.end();
            done();
        });
    });
    

You might want to share one client initialization over many test files. Create a small Node module to initialize and import it into every test file:

client.js:

exports.client = require('webdriverjs').remote({
        // Settings
    };
    

test.js:

var client = require('./client').client;
    var expect = require('chai').expect;
    
    // Perform tests
    

Running

Mocha test suites are execute with the mocha binary. If you followed this guide and installed Mocha locally, then you should describe a full path to the binary yourself: node_modules/mocha/bin/mocha.

By default, Mocha treats any test that takes longer than two seconds as failed. Given that we are actually initializing a web browser and making an HTTP request, we need to increase this timeout to 5 or 10 seconds:

node_modules/mocha/bin/mocha test.js -t 10000
    

If everything went according to plan, you should see output like this:

  .
    
      ✔ 1 <span class="nb">test complete</span>
    

The Next Steps

Once you’ve achieved your desired functional testing results, you may want to consider improving your setup further.

Two obvious directions are continuous integration and distributed Selenium testing.

Continuous integration

Your goal should be to minimize the time that you spend running tests.

You might want to use a full automatic continuous integration server, which will run the tests whenever needed automatically, and inform you if anything goes wrong.

In the world of open source, the role of such a server is covered by Jenkins CI: a convenient, powerful, easy to install service, which will run the tests whenever needed, execute them in any configuration that you provide, and possibly run many more build-related tasks, such as deploying your code to remote servers.

Alternatively, if you feel adventurous, you might experiment with a new project, called GitLab CI, which offers less features, but looks better and is integrated with GitLab, a self hosted GitHub clone.

In any case, your goal should be to minimize the time that you spend running tests. Instead, the tests should be run automatically and should only inform you if anything goes wrong.

Selenium Grid

Selenium has a number of implementation limitations. For example, you cannot run more than a few browsers on the same machine to be tested with Selenium.

In addition, you will notice that, once you have many tests, running all of them can become a lengthy process. Although continuous integration partly alleviates this problem, you might still want to run some tests in parallel on different machines.

Finally, you will soon notice that you want to test different browsers on different operating systems. And, while your testing code can, in theory, talk to different Selenium servers, once you grow a little, this setup needs centralization.

Selenium Grid setup tries to provide exactly that. Instead of having one Selenium server control a bunch of browsers on a machine, you have one Selenium server, which controls multiple Selenium nodes, each which controls only a few browsers on a single operating system.

Conclusion

The resulting stack, although not trivial, in reality, is quite simple. The addition of PhantomJS to the Selenium end allows us to begin using Selenium without much initial investment, such as setting up graphical test servers.

The usage of JavaScript as a testing engine ensures that our tests will be kept relevant in the context of web development for the foreseeable future.