Ain't nobody got time for fiddle-faddling with graphics
Daniel Yuschick
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
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
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 Interactions / Animations
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.
Skin-able and Reusable Assets
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
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.
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.
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.
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.
*
*
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.
*
*
- Currently working on a possible solution to this -
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".
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
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)