Snap Svg

Post tags: | snap-svg | svg | svg-image |

SVG image load event

Try svg.js

Research

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.

Gimp Doc - 2.3. Saving Images with Transparency

jquery plugin - beatak/jquery-imageloader