|
Creating an SVG Symbol Library: JAVASCRIPT BASICS & EXAMPLES Applied within the Adobe SVG Viewer(ASV 3.03) and Internet Explorer Environment (IE6/7/8)
The dynamic SVG symbol is the primary component of database-driven graphics. When SVG is used to build symbols it is not just another pretty face among graphic file formats: It contains extreme dynamic capabilities.
The attributes of each element in a symbol are fully accessible to customize it to fit many applications.
However, to fully take advantage of SVG's capabilities requires a programmed interface to
build and deploy the library. The examples present a tool to address this requirement.
|
||
|
Last Updated: 02/26/2009 SVG SYMBOL BASICS - Typically a symbol is comprised of a bunch of individual elements. The elements will be packaged within an SVG symbol element and then deployed in an application via use elements. Firstly, however each element must be individually created and arranged for the symbol element. The examples will show methods to build and arrange the elements for the symbol. Choosing the example will 'run' the example function, show the related javascript code, and its resultant svg source. SYMBOL LIBRARY APPLICATIONS - The symbols in the library will be deployed in various example applications. Also, the features of the library tool will be demonstrated. The applications will request and customize symbols and use elements. The symbol library is an XML file, with SVG element structure, that is accessed by each application. Choosing the example will 'run' the example function, show the related javascript code, and its resultant svg source. MEET THE PLAYERS - To simplify the examples, a few SVG elements have been created and named. Firstly, there's Librarian, otherwise known as the SVG document. The Root SVG element is Library. The main group is called Symbol. Residing within Symbol are its elements, Bubble, Box, Oval and Spider (circle, rect, ellipse and path). Associated with the elements is their a bounding box, called Ghost. Also, there is a special area called Collections, where good stuff happens. |
|
Javascript Functions |
|
SVG Source |
|||||||||||||||||||||||
|
|||||||||||||||||||||||||
|
Author's Note: The code herein attempts to concisely present an example or concept,
without regard to error trapping, other validation clutter, or wigetry ;). All code in these examples can be used without restrictions.
|
| Javascript SVG SYMBOL example: Bounding Box | myElement.getBBox(). A rectangle that encloses an element. Our Ghost element, the kids bounding box, is shown in white. It encloses them as a group. Also, each element has a bounding box. | The bounding box provides the size and location of an element at the time it was initially created. However it remains locked at its original location/size and does not track transforms(translate, scale, rotate, skew) following its creation. | |||||||||
| Javascript SVG SYMBOL example: SVG Wrapper | Provides a bounding box for transformed elements. Tracks the element through transformations. | disabled SVG_WrapperButton style="color:blue" onClick=Imp.wrapUs()>wrap us! | The SVG wrapper will be used to determine element size and locations for the symbol library. | ||||||||
| Javascript SVG SYMBOL example: Rebuilding Elements | Each element is rebuilt with their centers at the origin(0,0) | disabled rebuildBubbleButton onClick=Imp.rebuildBubble()>Bubble disabled rebuildBoxButton onClick=Imp.rebuildBox()>Box disabled rebuildOvalButton onClick=Imp.rebuildOval()>Oval disabled rebuildSpiderButton onClick=Imp.rebuildSpider()>Spider class=small>The element is rebuilt at the origin then translated to the center of the group. | The center of the element is computed. The difference between its original x,y value(s) and the center value replaces the original value. This results in centering the element at the origin. | ||||||||
| Javascript SVG SYMBOL example: Make Symbol | Creates a symbol element from the 4 kids, and deploys a use element | Note: It is best to create elements of a symbol at 'full-size' rather than the size of the expected use. Therefore it is easier to make refinements to the elements. | |||||||||
| Javascript SVG SYMBOL example: Element Offset | Elements that make up a symbol, and are not to be centered, will be offset from the center point. |
| The default value of each element of the symbol is that its center point aligns with the symbol's center point. Offset values may then applied on various elements to finalize the symbol layout. | ||||||||
| Javascript SVG SYMBOL example: SVG Symbol Element | The symbol element of a library, deployed as use elements, provides the most flexibility for multible applications. | disabled onChange=Imp.selectGlobalChange() globalChangeSelect > | Each symbol element includes the viewBox attribute. This is can be used for sizing the application's use elements. Also, the elements within the symbol can each be accessed/modified as a child node. | ||||||||
| Javascript SVG SYMBOL example: Symbol Element Attributes | The attributes for the element(s) of a symbol can be defined at the symbol. The element(s), therefore would not have those attributes listed. | The fill attribute of the ellipse in the above use elements is at the symbol | It is advantageous to assign the fill and stroke attribute for the symbol's primary element to be located at the symbol. Different colors, patterns, and gradients can then be applied to applications. | ||||||||
| Javascript SVG SYMBOL example: Symbol Sizing | The width or height of the reference symbol element can be specified for each application. It will retain its aspect ratio | class=small>Change either width or height. The other value will automatically compute its aspect ratio value
| The symbol's viewBox attribute is adjusted to change the base size of the symbol element. | ||||||||
| Javascript SVG SYMBOL example: Use Element Sizing | The use element default size is the same as its referenced symbol element. However, each use element size can be adjusted as a percentage value of its reference symbol element. | class=small>The adjusted value will retain the aspect ratio of the symbol value with the resulting pixel size shown below.
| Each use element will be relative to the size of the reference symbol element. The width and height values are set at identical percentage(%) values. | ||||||||
| SVG SYMBOL Javascript Example : Dynamic Properties of the Use Element. style='font-weight:normal'>Each individual use element can be adjusted after it is deployed within an application. | disabled dynamicUseSelect onchange=Imp.dynamicUseProperties()> | Each use element, following deployment, can be dynamically changed in: location, size, rotation, skew, opacity, filters, and xlink:href. |
| SVG SYMBOL Javascript Example : Sizing Use Elements for an Application. style='font-weight:normal'>The use element width and height value is a percentage of the library symbol size. | Adjust the above slider and view the corresponding width, height, and percentage values. | The library tool can preview each symbol's native size in the Editor segment. Adjust the slider to view pixel width/height and the resulting percentage value.That percentage value can then be used to size the use element for an application. |
| SVG SYMBOL Javascript Example : Setting Fill/Stroke Attribute for a Symbol Element. style='font-weight:normal'>The library symbol can be formatted with a fill and stroke value. These values will be applied to one or more elements of the symbol that do not have their own fill/stroke attribute. | disabled symbolFillRedButton onmouseover=Imp.symbolFill('red') style=' width:200; '>symbol fill=red disabled symbolFillWhiteButton onmouseover=Imp.symbolFill('white') style=' width:200; '>symbol fill=white disabled symbolFillBlueButton onmouseover=Imp.symbolFill('blue') style=' width:200; '>symbol fill=blue | The library tool can add this symbol fill/stroke attribute in the Editor segment. Select a specific element and its attributes. Choose a desired default fill/stroke colors, then select the checkbox to set that element's fill and stroke to be controlled by the symbol. |
| SVG SYMBOL Javascript Example : Rebuilding a Symbol style='font-weight:normal'>Elements of the symbol in the library can be added/deleted and rearranged. | disabled symbolBeforeChangeButton onmouseover=Imp.symbolBeforeChange() style=' width:200; '>symbol before change disabled symbolAfterChangeButton onmouseover=Imp.symbolAfterChange() style=' width:200; '>symbol after change | The symbol can be loaded into the Builder segment of the library tool and modified. It can then be saved as a new symbol or update the loaded symbol. |
| SVG SYMBOL Javascript Example : Deploying Use Elements for an Application style='font-weight:normal'>The required symbols will be extracted from the library. The use elements will be sized, defined and located. | Insert the size value for the symbol's use elements. Include an id for each symbol. Select a radio button, then click on the SVG image to locate each use element. Click on a use element to remove it. | To determine desired sizes, preview and adjust the size slider for the the various symbols in the Editor segment of the tool. Also, if an exact width or height value is desired, insert that value and the percentage will be calculated. |
| SVG SYMBOL Javascript Example : Include Data Attributes at Use Elements. style='font-weight:normal'>The use element is a convenient repository for information associated with each element. class=small>(Elements are randomly changed in: size, rotation, skew, opacity, filters, and xlink:href.) | disabled startDataFlowButton onClick=Imp.startDataFlow() >start disabled stopDataFlowButton onClick=Imp.stopDataFlow() >stop disabled resetDataFlowButton onClick=Imp.resetDataFlow() >reset disabled onChange=Imp.selectUseData() useDataSelect> | useChangeSpan>Historical data is recorded and retained at each use. The application's data can then be searched, sorted, and played back graphically via the use elements. |
| SVG SYMBOL Javascript Example : Hilite Use Elements via Background Ghost style='font-weight:normal'>Each symbol element has a companion ghost element that creates a single use element. | Place cursor over each element and observe the hilite. | The ghost use element is sized 30% greater than its hilited use, opacity is set at .5, plus it is inserted before the related use. |
| SVG SYMBOL Javascript Example : Hilite Use Elements via Resize style='font-weight:normal'>This method changes width/height value by a fixed percentage. | Place cursor over each element and observe the hilite. | This method renders well, plus allows it to accept an application's dynamic changes for the symbol/use elements. |
| SVG SYMBOL Javascript Example : Hilite Use Elements via Custom Ghost and Resize style='font-weight:normal'>This method changes width/height value by a fixed percentage, plus has a related ghost element. | Place cursor over each element and observe the hilite. | This works well in high-density areas, where many similar uses are clustered. The focused element is called to the top then reinserted at its original position. |
| SVG SYMBOL Javascript Example : Display Full Image-Sized Element style='font-weight:normal'>The use element can be resized to center and fill the complete image | Click on a element to toggle full/normal size. | This applies where elements contain details not visble at it normal size. The focused element is called to the top then reinserted at its original position. |
| SVG SYMBOL Javascript Example : Attach Data for Display at each Use style='font-weight:normal'>The use element includes a data attribute whose value is displayed at each use | Click on a element to toggle full/normal size. | The use has a companion text element linked to its location. At full size a dynamic text symbol element is loaded with each use's data attribute value. |
| SVG SYMBOL Javascript Example : Convert Symbol to svg Elements style='font-weight:normal'>For elements where each requires dynamic change capabilities not possible with the use element | Click on each svg 'use' element star or rectangle to change its individual color. | The symbol from the library is converted to an svg element and cloned for each use. This allows each svg 'use' element and/or its child elements to be individually modified. |
| SVG SYMBOL Javascript Example : Placing Individual Symbols As SVG Images in HTML files style='font-weight:normal'>Placing the symbol as an svg image file, rather than converting to a raster image, provides powerful dynamic capabilities and a high quality image. | The individual svg images, following placement can be dynamically changed. Select the button below to resize and change color of the heart image: | The symbol element is converted to an svg file plus offsetting the viewBox by 50%(-150 -150 300 300) for centering, and placed in an embed. class=small>The individual SVG files are shown above in the Source textarea |