A short 5 minute show & tell presentation about SVGs and how we use them at the University of Bath.

1. I ❤ ESSVEEGEE

2. “So what actually is an SVG Dad?”
“Well Bobby, SVG is…”

3. JPG PNG GIF SVG
SVG (Scaleable Vector Graphics) is a vector file format.
It’s XML-based and kinda not actually an image per se.
It can be used to display images and a whole lot more besides…

4. SVG
JPG
PNG
GIF
The power of SVG comes from its flexibility. As we can easily access
the structure of the SVG we can reference individual parts, change
colours, create dynamic text and even animate.
You can embed images within an SVG but that’s not really the point.

5. Full support from Chrome 49 onwards
Full support from Safari 9.1 onwards
Flawed implementation from IE9 to IE11 but it kinda works
Full support from Edge 13 onwards
Full support from Firefox 47 onwards

6. We use SVG on the site to deliver high-res University logos.
It did have a PNG fallback for older browsers but support is
good enough now for this to be removed. Splendid.
In use?

7. GIF
SVG SVG
PNG

8. BOUNTY!The first person to bring me an example of an SVG from our
site that only contains an embedded image will win a prize*.
*Prize will be rubbish and not worth more than 30p

9. An SVG sprite is a single SVG file that contains multiple paths and
shapes that can be displayed/manipulated together or
independently of one another.
A common use case for sprites, SVG or not, are icon sets.
SVG sprites

10. I want to use an SVG sprite to deliver optimised brand assets.

11. Fewer HTTP requests, A single file for maintenance, centralised
optimisation of multiple elements… It’s pretty cool!
In an SVG sprite we can simply give a group of paths an identifier (id)
and then reference that like a normal image in our HTML.
Why sprite?
<img src="svg/uob-logos/uob-logo-optimised.svg#logo-
reversed" alt="The University of Bath logo, reversed">
Simples :-)

12. The Sulis head icon described with SVG paths. OMG!

13. “Optimising an SVG is a lot like formatting a beautiful HTML page…”

14. Optimisation is just stripping out everything we don’t need:
Redundant groups, unnecessary IDs, duff paths, transforms etc.

15. Our SVG workflow needs to have a hand-crafting stage at the mo.
Sketch
Other vector
illustration packages
are available
SVGsus
It really is called
SVGsus. This is the
initial optimisation
stage
Hands
Reformatting by
hand, adding
comments and
cleaning up

16. Obviously reducing these steps would be great. At the moment making
an optimised SVG is a fairly inefficient process.
What we really want is some kind of automation with Grunt, our
Javascript task runner.
However automated SVG optimisation tends to be quite aggressive. It
likes strip out #ids - We need these as identifiers for the fragments.
There’s probably configuration that can sort this.
Automation

17. Combine SVG with srcset to deliver responsive University branding
Automate as much of our SVG generation workflow as possible
Benchmark performance of SVGs
The future

18. ❤

19. Phones out, time to tweet. The champagne story is complete.
.@uniofbathdmc shipped “Changing associated item not reflected in parent”.
Champagne to Claverton Down please @rossferg 🍾 #cursedstory