elastic-svg v0.1.2
Elastic SVG elements
=======
v0.1.2
Scalable Vector Graphics are one of the Web's most triumphant technologies, but they're not as responsive as they might be. This is a very lightweight, dependency-free library that generates svg elements that fit to their container and scale or don't scale as desired.
Installation
npm install elastic-svg --saveAnd in node:
import elasticSVG from 'elastic-svg'Or you can clone the repo and include directly on the page, which adds an elasticSVG function to the window:
<script src='./dist/elasticSVG.min.js'></script>Example
import elasticSVG from 'elastic-svg';
var b = elasticSVG("#container", {
height: 400
});
var b = elasticSVG("#container", {
aspect: 0.5
});Options
You must pass base a selector representing the parent element in width the SVG will be created. You can optionally pass an object as a second argument representing options. These are:
| property | description |
|---|---|
selector | The CSS3 query selector or HTML element in which to create the <svg> |
width | The initial width of the SVG. Defaults to width of parent |
height | The initial height of the SVG. Defaults to the aspect ratio. |
aspect | The aspect ratio of the SVG. Defaults to 0.618, approximately the golden ratio |
resize | Info about how the SVG should scale. Current options are: auto: Set the viewBox to the initial width and height, thus scaling automatically according to the SVG specification |
onResize | callback function to fire whenever the SVG resizes. This function will receive three arguments: the (new) width, height, and scale, which is (current width) / (original width) |
How resizing works
Sometimes you want an SVG to resize according to its original proportions, other times you want the height to remain fixed while the width resizes. If you specify the height, it will remain fixed. If you don't, but you specify aspect, it remains proportional. If you specify neither, it defaults to an aspect ration of 0.618, or approximately the aspect ratio.
A callback example
var elasticSVG = require("elastic-svg");
var b = base("#container", {
onResize: function(w, h, z) {
console.log("Scale is", z);
}
});Change log
- v0.1.1: Allowing for elements as well as selectors
- v0.1.0: Removing an annoying console log
- v0.0.8: Made an ES6 module and created
./distfrom external packager - v0.0.6: Flipped module and AMD check so as not to confuse webpack
- v0.0.5: Now stays fixed height if only height specified
To Do
Allow to make an existing SVG responsive