Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

elastic-svg

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

elastic-svg

Responsive SVGs with no dependencies

  • 0.0.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7
increased by250%
Maintainers
1
Weekly downloads
 
Created
Source

Elastic SVG elements

=======

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 necessary.

Example

var elasticSVG = require("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:

propertydescription
widthThe initial width of the SVG. Defaults to width of parent
heightThe initial height of the SVG. Defaults to the aspect ratio.
aspectThe aspect ratio of the SVG. Defaults to 0.618, approximately the golden ratio
resizeInfo 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
onResizecallback 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, s) {
		console.log("Scale is " + s);
	}
});

Change log

  • 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

Keywords

FAQs

Package last updated on 13 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc