Snap Svg
SVG image load event
- bugzilla Bug 620002 - Support SVG 2 event model (dispatch load rather than SVGLoad etc)
- MDN - document.createElementNS
Try svg.js
Research
- svg.dabbles.info
- tympanus.net - interactive infographic with svg and css animations
- sara soueidan - Understanding SVG Coordinate Systems
- sara soueidan - A Guide to SVG Animations
- codepen.io - Collection of Examples using Snap.svg
- W3 - Image Element
- W3 - SVG - 7 Coordinate Systems, Transformations and Units
- W3 - SVG - Transforms
- Patrick Hund - SVG Plus JavaScript Equals Awesome
- stackoverflow - SVG image load event
- raphaeljs reference - Element transform string
- Sara Soueidan - Making SVGs Responsive with CSS
code notes
#coffee {
transform-origin: 517px 484px;
}
Snap.select('selector')
Snap.selectAll('selector')
- paper = Snap(query)
- element = Snap.select(query) - Wraps a DOM element as Element
- Snap.slectAll(query) - Wraps DOM elements as set or array of Element
- fragment = Snap.fragmen(ele1,ele2)
- element = Paper.el(name,attr)
- useElement = Element.use()
- cloneElement = Element.clone()
- element.toDefs()
W3 - SVG - Transforms
W3 - SVG - Transforms
W3 - Image Element
W3 - SVG - 7 Coordinate Systems, Transformations and Units
MDN - Embedding raster images
Embedding raster images
Much like the img element in HTML SVG has an image element to serve the same purpose. You can use it to embed arbitrary raster (and vector) images. The specification requests applications to support at least PNG, JPEG and SVG format files.
The embedded picture becomes a normal SVG element. This means, that you can use clips, masks, filters, rotations and all other tools of SVG on the content:
MDN - SVG image element
There are some important things to take note of (referenced from the W3 specs ):
If you do not set the x or y attributes, they will be set to 0.
If you do not set the height or width attributes, they will be set to 0. Having a height or width attribute of 0 will disable rendering of the image.