DESIGNING DOCUMENTS
SVG
EASY
FOR HANDOFF
Ain't nobody got time for fiddle-faddling with graphics
Daniel Yuschick
CREATING SVG FILES
-
Create document in Illustrator/Sketch
-
Save As... .ai as a backup
-
Save As... .svg
-
Open the SVG in a text editor
Photoshop Smart Objects can be exported from Illustrator to SVG
NOTE:
GOOD USE OF SVG
-
-
Scalable Interactions / Animations
-
Skin-able and Reusable Assets
-
Text Animations
Easily add hover effects
Restyle colors to fit designs
Can avoid using image sprites
Iconography:
Iconography
GOOD USE OF SVG
-
Iconography
-
-
Skin-able and Reusable Assets
-
Text Animations
SVG elements remain relative to their document in terms of size and position allowing for easy scaling.
Scalable Animations:
Scalable Interactions / Animations
GOOD USE OF SVG
-
Iconography
-
Scalable Interactions / Animations
-
-
Text Animations
Buttons and certain assets with subtle differences can be streamlined with SVG and passing different classes to control visual attributes.
Reusable Assets:
Skin-able and Reusable Assets
GOOD USE OF SVG
-
Iconography
-
Scalable Interactions / Animations
-
Skin-able and Reusable Assets
-
SVG supports manipulating, angling, and animating text.
However, this should not be done if it hinders SEO.
Text Animations:
Text Animations
SINGLE SVG ELEMENT FILES
-
Buttons, CTAs, and Icons
-
Subtle Effects / Accent Animations (ie: diamonds in 5406)
-
One-Off Animations, Effects, or Interactions
Single-use SVG documents can be sized to the element itself.
It can then be thrown into a larger scene or document if need be in Dev or the viewbox can be adjusted to account for actual document size.
NOTE:
SINGLE SVG ELEMENT FILES
BUILDING SVG SCENES
-
Elaborate group of animations
-
Chaining and sequencing numerous animations with interactions
-
A series of animations where depth and layering are important
A full scene SVG document should be sent at full size to ensure all elements are positioned and layered correctly.
If the site container has a width of 940px the SVG scene should be 940px with a proportionate height. When the browser scales the SVG it will keep the full scene in proportion.
NOTE:
BUILDING SVG SCENES
Put elements in their starting position. Elements that are to begin off screen should be placed outside off the canvas.
All contents of a file will be exported as SVG code including elements positioned outside of the canvas and any other canvases that have been created.
SCENE POSITIONING:
BUILDING SVG SCENES
EXAMPLE:
BUILDING SVG SCENES
When animating elements along a path, the paths should be drawn with a distinct color from it's beginning to its end to ensure the path points are in the correct order when exported.
Paths should begin at the center point of an element.
There are instances where this doesn't apply. Animating numerous elements along a random path, for example, would be an exception.
PATH ANIMATIONS:
*
*
BUILDING SVG SCENES
EXAMPLE:
BUILDING SVG SCENES
EXAMPLE:
BUILDING SVG SCENES
Other transform animations cannot run simultaneously while animating along a path.
Visual animations, however, are possible. This includes opacity and color changes.
Elements can be scaled down to zero along a path. Rotating wildly in circles can also be achieved if nausea is the goal.
PATH ANIMATIONS:
*
*
- Currently working on a possible solution to this -
MAKE US NOT HATE EVERYTHING
Grouping elements and sets of elements and assigning IDs before handing off the file will be monumentally helpful.
Assign IDs by double clicking the element to enter Isolation Mode. Then in the Layers Pane the ID can be entered
Example: Say a coin is comprised of 1 circle and 2 paths and there are 10 coins, each coin should be grouped with an appropriate ID (coin1, coin2...). All ten coins, once grouped, can be grouped together as a set with an ID of "the-coins".
GROUPING:
MAKE US NOT HATE EVERYTHING
Never use spaces. Don't start with a number.
Beyond that, everybody has their own preference. I prefer lowercase with dashes. Just abide by the two rules above and we're cool.
Examples:
the-lightbulb-path
TheRedBalloon
coinsGroup
mini_doughnut
NAMING CONVENTIONS:
MAKE THEM NOT HATE US
Dev should upgrade to Adobe Creative Cloud to ensure there are no snags opening and working with files from Design.
Other SVG Resources:
SnapSVG (http://snapsvg.io/)
Greensock GSAP (http://greensock.com/gsap)
SnapFoo (yuschick.github.io/SnapFoo)
DEV RELATED NOTES:
DESIGNING DOCUMENTS
SVG
EASY
FOR HANDOFF
QUESTIONS?
SVG Best Practices for Design Handoffs
By yuschick
SVG Best Practices for Design Handoffs
This is a brief presentation covering best practices for our design team when dealing with creating SVG documents, paths, and scenes for animation.
