Skip to content

Latest commit

 

History

History
137 lines (121 loc) · 5.1 KB

UISvg.md

File metadata and controls

137 lines (121 loc) · 5.1 KB
Raw

UISvg

Kind: global class
Npmpackage:

new UISvg()

This is a display object class, extending UIComponent. It is a DOM element that contains a markup <svg> element which allows for vector display, manipulation and animation. This allows for smaller file sizes with crisp visual aesthetics.

By extending UIComponent this has all of its native properties and methods. See UIComponent for more info. Import from ad-ui

import { UISvg } from 'ad-ui'



<svg> formatting
Original code from Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 130 200" style="enable-background:new 0 0 130 200;" xml:space="preserve">
	<style type="text/css">
		.st0{fill:#00AEEF;stroke:#000000;stroke-miterlimit:10;}
	</style>
	<path id="XMLID_1" class="st0" d="M104.4,149.8L6,194.5l5.1-105.3l66.4,13.1L10.6,6.7l63.6,37.6l24.4-30.4
		c26.7,5.8,38.5,90.3-10.1,54.8L104.4,149.8z"/>
</svg>



Things that are unnecessary:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 style="enable-background:new 0 0 130 200;" xml:space="preserve">



The only thing that IS necessary in the <svg> node is:

<svg viewBox="0 0 130 200">



* Trimmed down for source:

<svg viewBox="0 0 130 200">
	<style type="text/css">
		.st0{fill:#00AEEF;stroke:#000000;stroke-miterlimit:10;}
	</style>
	<path id="XMLID_1" class="st0" d="M104.4,149.8L6,194.5l5.1-105.3l66.4,13.1L10.6,6.7l63.6,37.6l24.4-30.4
		c26.7,5.8,38.5,90.3-10.1,54.8L104.4,149.8z"/>
</svg>



NOTE: Sometimes there will be a width and/or height attribute. This will overwrite the viewBox and cause display issues. This should be removed



Convert to string for javascript. This can be done inline with the UISvg instance, but since vector is scalable and reusable across all sizes, it is a good idea to place this in AdData so that it can be accessed by all builds, classes and instances.

// In AdData
this.svgSrc = '<svg viewBox="0 0 130 200">'
			+ '<style type="text/css">.st0{fill:#00AEEF;stroke:#000000;stroke-miterlimit:10;}</style>'
			+ '<path id="XMLID_1" class="st0" d="M104.4,149.8L6,194.5l5.1-105.3l66.4,13.1L10.6,6.7l63.6,37.6l24.4-30.4c26.7,5.8,38.5,90.3-10.1,54.8L104.4,149.8z"/>'
			+ '</svg>'



Create a UISvg:

var mySvg = new UISvg ({
	id : 'my-svg',
	target : View.main,
	source : adData.svgSrc,
	css : {
		width : 75
	}
})

UISvg.source : string

Getter|Setter : A string markup of an svg code: which is in an html/xml style format. Note that when exporting from Illustrator or other programs there is extra bloat code that is not necessary.

Kind: static property of UISvg
Example

// get
console.log(mySvg.source)

// set
mySvg.source = '<svg viewBox="0 0 130 200">'
				+ '<style type="text/css">.st0{fill:#00AEEF;stroke:#000000;stroke-miterlimit:10;}</style>'
				+ '<path id="XMLID_1_" class="st0" d="M104.4,149.8L6,194.5l5.1-105.3l66.4,13.1L10.6,6.7l63.6,37.6l24.4-30.4c26.7,5.8,38.5,90.3-10.1,54.8L104.4,149.8z"/>'
				+ '</svg>'

UISvg.width : number

Getter|Setter : A Number representing the width of the div. Directly gets/sets the style css width.
WARN: This will change the height as well to maintain aspect ratio of the source

Kind: static property of UISvg
Example

// get
console.log(mySvg.width)

// set
mySvg.width = 140

UISvg.height : number

Getter|Setter : A Number representing the height of the div. Directly gets/sets the style css height.
WARN: This will change the width as well to maintain aspect ratio of the source

Kind: static property of UISvg
Example

// get
console.log(mySvg.height)

// set
mySvg.height = 140