Lsvg.org - Web Application: Draw SVG elements on Leaflet Maps
Lsvg - Documentation: Draw SVG elements on Leaflet Maps
StarMap.wiki - The graphical star wiki
About: StarMap.wiki - The graphical star wiki
Emerald Map Communities...77 second maps: List of Current Communities
Emerald Map Pictures...online in 77 seconds: List of Current Pictures

*Javascript Dynamic SVG Examples

The navigation of the examples in this file has been modified. Requests have suggested I organize it a bit. Also, since all modern bowsers support SVG, I have removed that segment that compared the various browser's issues. I hope you can now find things somewhat easier. - Francis Hemsher, June 2017
*When this symbol is shown in an example, then this SVG feature is not supported by the Firefox browser

Last Update: 11/15/2017

      Keyword Highlight :    

Basic Javascript SVG Examples
Import SVG Elements Transform Attribute In many cases svg elements, created in other applications, can be reused/imported into your current application. Typically, it must first be resized to 'fit' your current svg size. This uses getBBox and the transform attribute to resize it and place it where desired. Top⇧
03/14
SVG Transform Attribute Strings vs Transform Matrix This uses getBBox and the transform matrix object attribute to resize an element and place it where desired. If additional transforms are to be applied to the element, then the efficient object-oriented transform matrix is used, rather than appending transform 'strings' to the transform attribute. Top⇧
03/14
Create SVG Test GLOB Create inline svg with random circles, ellipses, polygons, and rectangles used for test environment. Top⇧
02/14
Inline SVG vs Object vs Img To dynamically interact, using Javascript, with the svg file which is loaded into an HTML5 page, it must be loaded as inline svg. If you load as an <object> or <img> you cannot program it using local javascript. You can load the svg file as xml via XMLHttpRequest and fill a DIV's innerHTML with the response. This inline SVG then can be dynamically changed via local Javascript. Top⇧
02/14
SVG in Object : local requests & parent.functions SVG within an object can include both local requests, plus function calls that are resident in the parent HTML. These functions can perform actions in either the parent html document and/or within the object. The parent, however, cannot directly access the object's svg elements. Top⇧
02/14
Load SVG file Inline Load an svg file as inline SVG. This provides dynamic svg applications seamless DOM access to its elements. Uses XMLHttpRequest. It can be loaded as a DIV's innerHTML via a string dump (responseText), and/or enhance XML elements then clone them as SVG elements (DOMParser) to build SVG companion elements. Top⇧
12/13
Parse SVG Elements via XML DOM Load svg files as XML via XMLHttpRequest. You can load the file's responseText directly into a DIV via innerHTML. Also, by using DOMParser you can insert svg elements to the current rootSVG. Top⇧
04/14
Combine SVG Files via XML DOM Load svg files as XML via XMLHttpRequest. Parse the Document Elements to create a client's file. This example first loads the Base.svg inline into a DIV, then extracts/adds elements from another companion svg file, combining them into a seamless inline svg root. XML elements are added directly to SVG using cloneNode Top⇧
03/14
Preview SVG Files Preview the image of local SVG file(s) on your computer. Uses FileReader object to create DataURL Top⇧
12/13
Convert SVG to CANVAS to PNG This is a utility used to convert files on your computer from SVG to a PNG dataURL
NOTE; This works in FF/CH. IE throws a security error
Top⇧
04/14
Fit SVG File into Div Preset a DIV where width = height, then call SVG file to fit into that DIV, and be centered. Uses getBBox method and viewBox attribute. It will fill the DIV's width and/or height, maintaining its aspect ratio. Top⇧
12/13
Fit SVG Shape into Button Preset a Button where width = height, then call an SVG shape to fit into that Button, and be centered. Uses getBBox method and viewBox attribute. It will fill the Button's width and/or height, maintaining its aspect ratio. Top⇧
02/17
Size Div via SVG Content Load an SVG file, then use SVG content to size its Div Container. The DIV has its style.overflow="hidden". Uses getBBox method. Top⇧
08/16
Load SVG File into Div & Zoom This calls an SVG file to fit into a DIV and includes the best cross-browser zoom and pan performance: D3 v4 d3-zoom module. This also exposes each svg element in the file for dynamic control. Top⇧
07/16
SVG Fills Window An SVG Image fills the screen. The body style="overflow:hidden". It is included in a DIV (style="position:absolute;top:0px;left:0px;"). Sets the SVG width/height to window.innerWidth/innerHeight The svg viewBox attribute is set to the bounding box values of the svg image. Top⇧
02/14
Inline SVG with SVG Background This example loads/sizes a 'static' SVG background file into your current inline SVG. The background is isolated from all DOM methods. The background takes the same width/height of the inline svg. Uses CSS3. Top⇧
03/14
Extracting Sprites From SVG File This example has a polygon sprite svg file. Each sprite has a unique id, and will build a <use> element when it is requested. The use requests the sprite via use.setAttribute("href","polygonSprites.svg#"+spriteId). Therefore the <use> element's href does not have to be stored in a <defs> element. Note: Each sprite was created with its center at (0,0), therefore translations and scale are accurate.
This is supported by all current browsers
Top⇧
09/17
Full Page SVG Grid This example creates a full size 'grid' SVG background to the HTML web page. The svg is inline contained within a div style='position:absolute;top:0px;left:0px;width:100%;height:100%' Top⇧
02/17
Create SVG Grid You can create a customed sized SVG grid for your application. Top⇧
06/17
Convert SVG to XML String For viewing and debugging SVG at the client. Uses XMLSerializer Top⇧
01/14
Save SVG To File Save your SVG to a file on your computer. This sends the SVG to your Downloads folder. Top⇧
01/14
Zoom SVG World Map with D3 World map includes a path for each country. Zoom the map using D3, Version 4. Provides Mouse Wheel zoom. Uses d3.zoom() (d3 v.4). Includes smoothing transitions. Best svg cross-browser zoom behavior at this time. D3,Version 4 has finally corrected the problem with FF. Top⇧
07/16
Zoom SVG World Map plus Print with jQuery Zoom the map using D3, then Print the zoomed in segment by using JQuery to open a print window. Prints the visible content of the DIV, containing inline svg. (World map SVG file available at: www.svgDiscovery.com/B0/world.svg) Top⇧
01/14
Zoom SVG World Map using Ariutta svgPanZoom World map includes a path for each country. Zoom the map using Ariutta svgPanZoom. Provides Mouse Wheel zoom. (World map SVG file available at: www.svgDiscovery.com/B0/world.svg) Top⇧
05/14
Zoom SVG Image with Canvas First loads svg image file into DOM to determine required width, height, and viewBox. Then inserts the svg string as base64 into canvas. Provides Mouse Wheel zoom. Uses matrix transforms. Top⇧
06/17
Return SVG Screen Points After Transformations In many cases it is meaningful to return certain svg elements(polygon, polyline, and path) to their screen x,y values following transformations. This is accomplished using getCTM, and matrixTransform
Note: Use vector-effect="non-scaling-stroke" for elements with stroke(*Not available in IE).
Top⇧
01/14
Create an SVG Circular Pie Slice Create an SVG arc path that represents a pie slice of a circle. Its start point is set at (0,0), then translated to its desired location. Provide the radius and slice angle. The slice can then be rotated. Top⇧
03/14
Convert SVG Circle or Ellipse to Path If the radius and center point are known, the circle or ellipse can be converted to a path which includes 2 arcs. Top⇧
03/14
Text follows an SVG Circular Path(arc) Create a circular arc path and places a textPath. Text can be arranged: top, bottom, left and right, plus inside/outside of the circle. Top⇧
03/14
SVG Circular Arc Segments: TextPaths & Transformations This example shows how arc paths can create segments of circles(The arc's x,y radius are set equal). It includes a textPath and start/end arrows. After an arc is transformed, via translate and/or rotation, the transforms can be removed and screen X,Y values can be computed. Arrow markers are designed to align relative to path curvature. Top⇧
02/14
SVG Circular Arc Segments: 2 Points plus Radius This example draws a circular arc segment, given 2 points and the radius. Top⇧
02/14
SVG 'Flight Path' Between Points w/ Arrow Rather than creating straight lines between points, draw curved lines between points, all with the same 'Flight Path' radius. This example draws arcs between points.
Top⇧
02/14
Convert Regular SVG Polygon To Arcs Rather than creating straight lines for each side, draw them as curved lines. This example draws an arc, given 2 points and a radius, for each side of the polygon. The direction of the arcs can be either outward or inward. Top⇧
02/14
SVG Donuts: inner & outer Arcs Use center point plus outer/inner radii, creating 2 circular arcs to build a donut path. Top⇧
02/14
SVG Pie Chart: Circular Arcs Use center point, plus adjacent circular arcs to build a pie chart. This example uses random values to build a pie chart. Top⇧
02/14
Inner Plus Outer SVG Circular Arc Path Use center point, and radius, plus start angle and end angle. This example uses random values to build a path that includes both an inner plus outer circular arc. Top⇧
02/14
SVG Tooltips <title> with word wrap Uses the browser's built-in mouse over to display a tooltip via an SVG <title> element. Provides word wrap by breaking the line at a white space near the desired length, to prevent long single line length in CH/FF. *IE automatically breaks line at words, about 50 characters Top⇧
09/16
SVG Tooltips using DIV A DIV, that is placed over the inline SVG, is the most diversified means of showing data related to an SVG element. The element can be highlighted and the DIV can include the associated data attached to the element. The DIV is positioned at the element taking into consideration the web page scrolled position. Top⇧
02/17
SVG Wrap Text in Rectangle Wrap text to fit within a rectangle's width and adjust a rectangle's height to accept the text. Top⇧
02/17
Dropdown Select Menu with SVG Image Options Replicates visually, and the performance of, the HTML <select> and <options> dropdown menu. Uses SVG Images within each option to be selected. Uses CSS for the <nav> element with <ul> and nested <li> elements. Example loads svg images from files, adjusting their viewBox values to properly place them at each option. Top⇧
10/14
Print/Save SVG as PDF You can save the inline SVG segment of your web page as a PDF. This uses the browser's 'Print..' feature, the window events onbeforeprint, onafterprint, plus window.matchMedia, and 'Save as PDF'. Top⇧
01/17
Write UTF-8 Symbols Special unicode symbols can be dynamically placed in SVG text elements, using symbol hexidicimal values. Uses parseInt(hex,16) to return a code value, and String.fromCharCode(code). Top⇧
03/17
Fill-Up A Shape Dynamically fill a shape from bottom to top. This uses a <mask> that includes an element that duplicates the shape. A rectangle, located/sized based on the shape's bounding box, calls the mask, and moves rectangle upward, simultaneously changing its height, to fill the shape. Top⇧
03/17
Line & Circle Intersects Determine if a line intersects a circle and the point(s) of intersect. Top⇧
03/17
SVG Intersect/Collision Detection Determine if various SVG elements intersect/collide (Path, Polygon, Polyline, Rect, Circle, Text, Line, and Ellipse). Shows points of intersection. This is also applied to transformed elements. Top⇧
03/17
Drag/Drop Collision Detection When dragging an SVG element, show when its edge collides with its neighbors. Top⇧
03/17
Auto-Positioning: SVG textPaths and Arrows This example shows corrected text alignment for a textPath and its associated directional arrow line. The text remains upright, and can be defined to always be either above or below the line. Without correction, the text could be upside down. Each directional line includes; a line with end arrow marker, a textPath, and a straight path. Top⇧
02/14
SVG Regular Convex Polygons and Polygons As Symbols
Polygons are easily built and combined, making them a natural for creating SVG symbols. They can be arranged so their center point is at (0,0), being ideal in accepting transforms to fit many applications.
Regular Polygons & Transformations Create regular polygon based on a radius length:circumradius (radius of a circle passing through all points). Transform it via matrices, then re-compute its transformed points. Uses polygon points object, getCTM, and matrixTransform Top⇧
12/13
Create Regular Polygon By Edge Length Build a regular polygon with a specific edge length. Transform it via matrices, then re-compute its transformed points. Uses polygon points object, getCTM, and matrixTransform Top⇧
10/16
Create & Size an SVG Rhombic Polygon This will create a rhombus for use in your other applications. Provide an initial Side Length, its starting center point, and interior angle. Also, rotate by 45 deg, and set its size. The scale transform is used to size the rhombus. Also the transform is then removed. centering the rhombus at (0,0). This allows the rhombus to be translated to its desired location in your application. Top⇧
04/14
Create SVG Star Polygons Provide a radius, its center point, and number of star points. Top⇧
12/13
Create SVG Elliptical Polygons Build a regular polygon. Scale in either x or y direction, then re-compute its transformed points. Uses scaleNonUniform Top⇧
12/13
Build A SVG Polygon Symbol Build and transform polygons. Create a symbol using the transformed polygons. Re-compute transformed points to screen points and save as a symbol <g>, sized at 1.0. The symbol <g> can be sized and placed in other applications. Top⇧
03/14
Using An SVG Polygon Symbol A symbol has been built that includes two polygons; an 8-sided regular polygon and a 6-pointed star polygon. The symbol is a <g> element, containing both polygons, placed in its own <svg> file. The diameter of the symbol is 1, and its center point is (0,0). It has default fill colors of black and white. Polygons used as symbols do not have stroke colors. Note: the symbols are cloned <g> elements, not <use> or <symbol> elements. Each symbol clone includes a time stamp(UTC-ms), creating its unique id. Top⇧
12/13
SVG Polygon Symbol Library This is a group of 40 symbols, containing one, two, or three polygons, sized at 1.0 with default fill colors of black and white. These are considered the 'native' symbols. Various applications will use them with a specified size and color(s). These are defined as the 'registered' symbols in a particular app. In this example, there are 38 colors available to each registered symbol, used to create a unique id via color numbers. Top⇧
01/14
Build SVG Polygon Symbols for Library(Stack) This is a tool that is used to create polygon symbols for a library. It stacks 1, 2, or 3 polygons. Polygons can be adjusted via side length, radius, scale, and/or rotation. Each symbol is created at size=1 and centered at (0,0) in an SVG file to be saved in the 'native' symbol library. Top⇧
01/14
SVG Convex Polygons Counter-Clockwise Points A convex polygon (aka Convex Hull) has no angles pointing inwards. More precisely, no internal angles can be more than 180 degrees. Polygons should have their points arranged counter-clockwise(CCW). This will assure various computations are consistent. This example arranges a group of points so they are CCW, and builds the resultant polygon. Top⇧
01/14
Test Polygon As Convex Determine if a polygon is convex. Uses vector algebra, and the cross product. Top⇧
01/14
SVG Polygons - Fix for Convex/CCW Test an existing svg polygon and arrange its points CCW, and remove any concave points. Top⇧
01/14
Point Inside SVG Convex Polygon Determine if a point is located inside of the polygon. Uses Jordan Curve Theorem Top⇧
01/14
Random Points Inside Polygon Create a group of points that fall within a concave or convex polygon. Top⇧
07/17
Line Intersect SVG Polygon Determine where/if a line intersects the sides of a polygon. Uses vector analysis Top⇧
01/14
Intersecting SVG Polygons Determine where polygons intersect. Uses vectors analysis Top⇧
01/14
Composite Intersecting SVG Polygon Create a composite polygon from the intersection of two polygons. Uses vector analysis and Point-in-polygon: Jordan Curve Theorem. Top⇧
01/14
SVG Convex Polygons - Centroid Compute the center of gravity(centroid) of a convex polygon. Top⇧
01/14
SVG Convex Polygons- Expand/Contract Expand/Contract the size of a convex polygon by a preset offset value. Each side of the polygon is offset. Top⇧
01/14
SVG Convex Polygons- Transformed Points Transform the polygon and recompute the polygon's new points, then remove transform. Uses matrixTransform Top⇧
07/16
SVG Convex Polygons - Area Compute the area of a convex polygon. Top⇧
01/14
SVG Convex Polygons - Trim A convex clipping polygon trims one or more interior intersecting(subject) convex polygons. Uses Sutherland-Hodgman clipping algorithm. Top⇧
01/14
SVG Convex Polygons - Side Lengths Compute, and show the length, of each side. Place the length values at the center point of each side. Top⇧
01/14
SVG Convex Polygons - Side Length Align Compute, and show the length, of each side. Align the length values with side, and center-located inside the polygon. Uses the path element with textPath. The path element has no stroke or fill, used only to support textPath. Top⇧
01/14
SVG Convex Polygons - Side Directional Arrows Show line end arrow marker for CCW polygon points. Compute, and show the length, of each side. Align the length values with side. Uses the path element with textPath. The path element has no stroke or fill, used only to support textPath. Top⇧
01/14
SVG Convex Polygons - Bearing Lines This example computes bearings of the sides of the polygon. Both Azimuth and Compass Quadrant bearings are shown. Show line end arrow marker for CCW polygon points. Compute, and show the length and bearing of each side. Align the bearing values with side. Uses the path element with textPath. The path element has no stroke or fill, used only to support textPath. Top⇧
01/14
SVG Quick Reference This is an alphabetic listing of Javascript examples for SVG elements, methods, and properties. Top⇧
01/14
SVG Lines
Various way to create/compute lines and manipulate them.
SVG Line: 2-Point Equation This example uses the point-slope form for the equation of a line when 2 points are known. It extends the line to the X-axis and Y-axis Top⇧
04/14
Angle Of An SVG Line This example determines the angle of a line, referenced from its start point(x1,y1) Top⇧
04/14
Creating SVG Lines From/To Polar Coordinates This example use the start point(x1,y2), angle, and length of a line to determine the end point of the line (x2,y2). Or conversely, uses the start/end points of a line to determine its polar coordinates. Top⇧
04/14
SVG Line and its Parallel Line(s) This example creates lines parallel to a reference line, with an offset, and direction(clockwise/counter-clockwise). Top⇧
04/14
SVG Line and its Perpendicular Line This example creates a perpendicular line through the center of the referenced line. The perpendicular line is the same length as the referenced line.. Top⇧
04/14
Create an SVG Square From A Line This example uses a reference line to create 3 additional lines to form a square. The lines are arranged either clockwise or counter-clockwise. Top⇧
04/14
SVG Extend/Trim Lines to a Reference Line This example extends lines to end at a reference line. It also trims the lines to either the cw or ccw side of the reference line. Top⇧
04/14
SVG Polylines : Plotting Equations
Polylines are a good choice drawing mathematically-generated parametric equations. A minimal number of points are plotted that provide a visually smooth curve.
SVG Sine Curve This example creates a sine curve. Top⇧
04/14
Parametric SVG Circle This shows the criteria needed to draw an SVG parametric circle. The following are defined: origin and radius These control placement of the plotted x,y values of the parametric equation. Top⇧
04/14
Parametric SVG Ellipse This shows the criteria needed to draw an SVG parametric ellipse. The following are defined: origin, width, and x/y ratio. These control placement of the plotted x,y values of the parametric equation. Top⇧
04/14
Parametric SVG Spiral This shows the criteria needed to draw an SVG parametric spiral. The following are defined: origin, width, and x/y ratio. These control placement of the plotted x,y values of the parametric equation. Top⇧
04/14
Parametric SVG Curves This shows the criteria needed to draw an SVG parametric curve. General equation: x = k cos(α) - cos(revα), y = k sin(α) - sin(revα) The following are defined: origin, amplitude, k, and rev(revolutions) . These control placement of the plotted x,y values of the parametric equation. Top⇧
04/14
Location, Location, Location - Finding X,Y values in SVG
Dynamic SVG images are viewed inline within an HTML5 document. SVG is zoomed & panned, elements are transformed, and must be accessed to process events. Trying to find various x,y values can therefore be a challenge.
SVG's Four(4) X,Y Values Their are four x,y values used in dynamic SVG, defined herein as follows: html document(htm), svg image(svg), screen matrix transform(scr), element transformed(trn) . Top⇧
02/14
Get HTML X,Y(htm) & SVG X,Y Values(svg) with Offsets Assume the SVG image is contained in a DIV inline within the HTML5 document. The HTML clientX/clientY position is identical the svg clientX/clientY values. Neither are useful unless they have been adjusted with offsets,
Note: in svg evt is an event object. But, in HTML event is the event object.
Top⇧
02/14
SVG X,Y using SVGPoint & getScreenCTM Assume the SVG image is contained in a DIV inline within the HTML5 document. The SVG x,y with DIV offset is identical using the SVGPoint with getScreenCTM. Top⇧
02/14
SVG X,Y using SVGPoint & getScreenCTM with ViewPorts Assume the SVG image is contained in a DIV inline within the HTML5 document. However, the svg viewBox value is not the same size as the DIV container. The SVG x,y with DIV offset represents the values over the svg image relative to the HTML page. Using the clientX/Y values of an SVGPoint plus getScreenCTM will provides the SVG x.y values within the viewPort. Top⇧
02/14
Native Point On Transformed Element: getCTM vs getScreenCTM When an element has been transformed, either individually, and/or inside a transformed container, it is important to be able to find native points on the transformed element. These 'native' points can then be referenced to svg 'image' points, and visa versa. getCTM used to obtain a point in the transformed element and give it to the svg image. getScreenCtM used to obtain a point in the transformed element , and use it within the transformed element. Top⇧
02/14
Extract SVG Element From Transformed Parent Attach the parent's transform to the extracted element. This example removes an element from a transformed <g> and attaches the g's transform to the extracted element. This uses getCTM and createSVGTransformFromMatrix to merge a matrix transform to the extracted element. Top⇧
02/14
Find X,Y in Transforms & ViewPorts Elements are transformed and reside it different viewPorts. This example uses getScreenCTM and inverse to access x,y values. Top⇧
02/14
SVG Wrapper Bounding Box after Transform Uses an SVG Wrapper to find the element's pseudo bounding box after it has been transformed. Top⇧
02/14
SVG Enclosure Polygon Rather than a bounding box rectangle, this computes a transformed element's enclosure in screen points. The enclosure is a polygon that responds to the element's transforms. Top⇧
05/17
SVG Native Center Transforms with Wrapper The Native Center is the center of an element's bounding box. This remains constant no matter which transforms has been applied to an element. Therefore this center point there can be used as the reference point for stable rotation, scale, and skew transforms. By use of an svg wrapper, the element can be translated so its center point moves to a target point. Top⇧
03/14
Move SVG Transformed Element To Target Point After an element has been transformed, then by use of an svg wrapper, the element can be translated so its center point moves to a specific target point. Top⇧
04/14
Linking Elements in Different Root SVGs Linking points in different SVG root elements, with different viewports. Uses getCTM and matrixTransform. Top⇧
03/17
SVG Universal Drag/Drop Drag/Drop uses matrix transforms, with object methods, not strings. It can drag/drop elements with varying transforms and viewPorts. It employs getScreenCTM, createSVGTransform and binds the element to a transform List Top⇧
03/15
SVG Drag and Drop Into Viewports This example shows dragging elements and dropping them into the various viewPorts(SVG roots). Uses matrix transforms. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs getScreenCTM, createSVGTransform and binds the element to a transform List Each viewport target is determined by using an SVGRect object and employs checkIntersection.
Works in IE/CH. FF is in the process of implementing the checkIntersection method
Top⇧
02/14
SVG Zoom Viewing Rectangle w/ getBBox When the svg image is zoomed/panned, determine the size of the viewing rectangle. This example shows elements if their bounding box is fully contained in the viewing rectangle.
Works in IE/CH. *FF is in the process of implementing the checkIntersection method
Top⇧
02/14
SVG Zoom Viewing Rectangle w/ checkEnclosure When the svg image is zoomed/panned, determine the size of the viewing rectangle. This example shows elements if they are fully contained in the viewing rectangle. Uses getCTM.
Works in IE/CH. *FF is in the process of implementing the checkIntersection method
Top⇧
02/14
SVG Zoom Viewing Rectangle w/ checkIntersection When the svg image is zoomed/panned, determine the size of the viewing rectangle. This example shows elements when they are either fully contained and/or intersect the viewing rectangle. Uses getCTM.
Works in IE/CH. *FF is in the process of implementing the checkIntersection method
Top⇧
02/14
SVG Zoom Into a Specific Element - Basic When the svg image includes zoom/pan, you can select specific elements to zoom into. This basic example works with elements that have no previous transforms. Top⇧
02/14
SVG Drag/Drop: Individual & Group Of Elements Drag/Drop individual elements, or group-selected elements: Dynamically create a rectangle to enclose a group of elements. Then drag/drop the group. Top⇧
03/14
The SVG Spiral Path
The Spiral is a highly compact graphic means of displaying data. The Spiral can be arranged in a three-dimensional serpentined manner in which symbols, representing data, are attached.
Basic SVG Spiral Path The spiral is created from an SVG path element with a single "S" command and following points that are located using the spiral equation. Creates a clockwise or counter-clockwise spiral path element with spiral 'smoothness' dependent upon the parameters: Points, Separation, and Revolutions Top⇧
02/14
SVG Spiral Radial Lines Computes and shows the lines from the center of the spiral to each point along the spiral Top⇧
02/14
Place SVG Elements On Spiral This demonstrates the visual effects for svg elements/symbols located along the spiral. Top⇧
02/14
SVG Spiral Data Disc The Data Disc is a symbol that has been arranged, when placed on a spiral, to represent a maximized number(12000+) of secure/encrypted visual Status States. Each change shows a status update simulation for a random disc. Top⇧
10/16
SVG Dynamic Data Changes This example shows an example of how encrypted data changes can be monitored via Data Discs along a spiral. Top⇧
02/14
SVG Decorative Spirals This example shows 7 spirals with various elements that are elegantly attached. Top⇧
02/14
Javascript SVG Cross-Browser Animations
CSS animations of svg elements is tricky across the various browsers. This demonstrates a cross-browser core animation object, AnimateJS that outputs 'analog' values as: Linear, Quadratic, Circular, Ease, Pull Back, Bounce, Elasticity, Ease In/Out, Sine, and Spring. Animations can be run in parallel and series, with reliable smoothness of performance for all browsers. Animations can be attached and interlaced between many elements.
SetInterval: Frames Per Second Basic Animation - Change a value by a small amount for each frame using setInterval. Rotating 2 semi circles. Top⇧
03/14
SVG Core Animation Object - Linear This introduces the core animation function AnimateJS which is applicable to all animations. This example sets output to follow a linear function to rotate a rectangle. Note: Output is not via a step-generator, but rather an 'analog' value that follows a specified equation along its time line. Top⇧
03/14
Compare SVG Animation Easing Functions The visual performance of an element's animation is generally based on its size or location. This compares various size/location animations at over 100 easing functions. The easing functions are from jQuery, D3, GreenSock, Kute.js, and Snap.js/Adobe. Top⇧
05/17
Transforming SVG Elements If you intend to simultaneously animate various transformations(translate, rotate, scale, and skew) of an SVG element, then use an SVG 'Wrapper' element and SVG's createSVGTransform. This is an animation of multiple transforms applied to a rectangle. Top⇧
03/14
Core Animation Object - Linear This introduces the core animation function AnimateJS which is applicable to all animations. This example sets output to follow a linear function to plot elements along a spiral. Note: Output is not via a step-generator, but rather an 'analog' value that follows a specified equation along its time line. Top⇧
03/14
Core Animation Object - Quadratic Quadratic Animation - change follows a quadratic curve. This example shows the radius of a circle increasing, plus draws the output curve. Top⇧
03/14
Core Animation Object - Circle Quadrant Animation change follows the quadrant of a circle. This example shows the radius of a circle increasing, plus draws the output curve. Top⇧
03/14
Core Animation Object - Pull Back Animation pulls back and 'launches' a variable. This example shows the radius of a circle reducing by a set amount then increasing to a set value, plus draws the output curve. Top⇧
03/14
Core Animation Object - Drop/Roll Animation Drop or Roll. This example animates a circle's cx(roll) or cy(drop) values. The object will seem to be effected by some force to move it, then bounce a few times at its destination. Top⇧
03/14
Core Animation Object - Elasticity Animation Elasticity in/out. This example shows the radius of a circle being changed, both Inward and Outward. Top⇧
03/14
Core Animation Object - Ease This example shows the radius of a circle being changed, both inward and outward, following the ease in/out algorithm. Top⇧
03/14
Core Animation Object - Sine Wave This example shows the radius of a circle, and its cx values being changed, following the sine wave. Both full and half sine wave, plus continuous, is demonstrated. Top⇧
03/14
Example:Linear - Follow Path An ellipse element follows a path, aligning along the path. Top⇧
03/14
Example: Draw/Erase Circle - Quadratic Draw Circle - the circle is created via an equation for circle points as a polygon. Top⇧
03/14
Example - Animate SVG Buttons : Linear Each button has an svg root and associated elements. They are each transformed to fit the button. Clicking the button will animate color and size. Top⇧
03/14
Example: Rotate and Translate This example rotates and transforms two <g> elements and a line, using the Linear function. The transformation moves a circle and attached line counter-clockwise around the edge. Top⇧
03/14
Example:Sine - Pendulum Pendulum follows sine function. Two lines are rotated to simulate a clock's pendulum and second-hand. Top⇧
03/14
Spring Animator This example use a Spring Function showing pull back, release, and dampening of a spring attached to the ends of a rectangle. Top⇧
03/14
Example: Race Cars - Quadratic+Linear Five(5) 'cars' race each other around a spiral track. Each race is won by the car with the best performance. Uses the quadratic delta to simulate acceleration. It uses two animation objects, one for the race, and the other for movement to the start positions. Top⇧
03/14
Example: Hover Over Element - Quadratic When the cursor moves over the element its size is increased. This works on both transformed and non-transformed elements, contained in a <g>, or as individual elements. Uses getBBox to determine scale reference point. Top⇧
03/14
Example: Zoom IN/OUT - Linear Inline SVG smoothly zooms in or out. The the width and height container DIV is changed, and the svg is rotated. Top⇧
03/14
Parallel and Series Timelines - Linear & Quadratic Various animations are running smoothly at the same time, and in sequence. Arranged to run either in series or parallel. This example draws circles, lines, and ellipse. Top⇧
03/14
AnimateJS Ready For Prime Time This is a test environment where many animations are running simultaneously. This includes an AnimationJS on 100 elements, rotating them individually. Creates inline svg with random circles, ellipses, polygons, and rectangles and attaches AnimateJS to each. Top⇧
03/14
Slide Div open/closed This example opens/closes DIV by animating its height and width via quadratic equation. Top⇧
04/14
Draw SVG Shapes This demonstrates how to animate the drawing of typical svg shapes: circle, ellipse, rect, path, and polygon. The element creates a mirror path, used to place points for drawing the animated polyline. Top⇧
04/14
Expand/Contract SVG Elements This demonstrates how to animate the size of an svg element: circle, ellipse, rect, path, polygon, and text. The element expands, contracts, then returns to original size. Top⇧
04/14
Rotate SVG Elements This demonstrates how to rotate an svg element: circle, ellipse, rect, path, polygon, and text. The element rotates forward then backward. Top⇧
04/14
Fade Out/In SVG Elements This demonstrates how to animate the opacity of an svg element: circle, ellipse, rect, path, polygon, and text. The element fades out and returns to fade in. Top⇧
04/14
Move SVG Element To Target This demonstrates how to animate the movement of an element to another location: circle, ellipse, rect, path, polygon, and text. The element's center moves to a specific target point, then returns to its original location. Top⇧
04/14
Morph SVG Elements This demonstrates how to animate (skewX, skewY) an svg element: circle, ellipse, rect, path, polygon, and text. The element skews then returns to original form. Top⇧
04/14
Type Lines Of Text Each line of text is a separate text element. Initially each element is hidden. The ids are in numerical order. The animation generates whole numbers. Top⇧
04/14
Sine Wave Animate a sine wave, using parametric equation to build a polyline. Top⇧
07/16
Animate Icon Sprite SVG Icons can be created with unicode symbols, via text elements. Each icon can be included in buttons, etc., and animated. Top⇧
04/17
Animate Polygon Sprites There are 30 sprites placed in a <defs>. Each sprite is comprised of a <g> element containing polygons created with their centers at (0,0) and sized at 1 pixel. Therefore they can be seamlessly transformed, making them ideal for animations. Top⇧
04/17
SVG Tic Tac Toe Game This includes two levels of play: Intermediate or Expert. The winner is awared smileys. Animation is included when a selection is made. Top⇧
08/17
1000 SVG Uniform Tile Patterns : Tessellation
A tile pattern is made up of a single tile unit, repeated to fill the desired area. The tile unit is comprised of tessellated regular/convex polygons. Each tile unit can be infinitely customized as to size, rotation, color, gradients, texture, inlay-shape, and morphing. The tile units are then further tessellated to build the tile pattern. There are over 1000 patterns to choose from.
Tile Unit
SVG Uniform Tile Patterns: Examples This includes a few examples of SVG Uniform Tile Patterns. You may copy their source and use them in your applications. If you create a pattern you want to share, send it to me, and I'll publish it herein. Top⇧
10/16
SVG Uniform Tile Patterns: Customize This will open the tessellation work space used to create your unique Uniform Tile Patterns and save the resulting SVG source, available to use in other applications. Top⇧
10/16
Build & Tessellate Your Tile Unit Create a group of regular/convex polygons and irregular/concave polygons and build a pattern for a Tile Unit. Manually attach polygons to the desired edge of another. Then you can build and test your tile unit to determine if it will properly tessellate to fill an area. Identify which vertices in the tile unit connect to their neighbor, when building the rows/columns of an area tessellation. Top⇧
11/16
Google Map API - GIS Mapping: Draw SVG elements on the Google map and Place Thousands of SVG Polygon Symbols in the Google World Map
The Google World Map has difficulty with smooth performance when it contains a lot of symbols. It is a fantastic map for showing geographical features, but was not conceived as a means to place symbols.
Google Map API - Dynamic SVG Overlay Place thousands of SVG polygon symbols in the Google Map without impacting its Zoom/Pan performance. Uses an the Google Map API OverlayView object, populated with svg symbols. When the map is zoomed/panned, the overlay is resized, and its svg symbols are dynamically re-aligned. This example loads almost 3000 symbols into the Google Map. *Works best in CH, with IE and FF not as smooth. Top⇧
11/14
SVG and Leaflet World Maps
Leaflet can hold many SVG elements efficiently. It transitions and sizes them nicely in IE/FF/CH during the map's mouse wheel zoom and pan. The examples below show both how to place svg symbols, and how to draw svg elements directly onto the map. The symbols maintain a constant size during zoom/pan, whereby the drawn elements retain their original size.

For myself, determining the relationships between svg element locations and its lat/lng, along with the map's lat/lng values and distances was somewhat of a challenge. These examples share the journey I took to wrap my head around these dynamic values. Hope it helps...

Leaflet SVG Layer This places an SVG layer into the world map and conveniently sizes it to overlay the entire world. It uses the object initPathRoot and will be automatically sized based on the map's Div container size. Also, an SVG circle element is added and located using the map method latLngToLayerPoint. The circle is then adjusted when the map zooms, again using the map method latLngToLayerPoint Top⇧
03/15
Leaflet Markers vs SVG Elements This shows two Leaflet Maps: one has 5500 markers, the other has 5500 svg elements. Zooming and Panning each map will show identical rendering of SVG vs Markers. Top⇧
08/16
Leaflet Polygons vs SVG Polygons This shows two Leaflet Maps: one has 10,000 Leaflet polygons, the other has 10,000 SVG polygons. Polygons are randomly placed. Zooming and Panning each map will show identical rendering performance of both SVG and Leaflet. Top⇧
08/16
Add SVG Icons to Leaflet Map Each icon is an SVG text element of font family: Arial Unicode MS. These typically represent the deprecated Wingdings/Webdings. This example shows 2000 icons randomly placed. There are 300 icons to choose from. Top⇧
08/16
Add SVG Symbols to Leaflet Map Two or thee SVG polygons are grouped to create a symbol. This example shows 5000 symbols randomly placed. There are 23 symbols to choose from. Top⇧
08/16
Add SVG Shapes to Leaflet World Map This adds 1000 svg elements(circles, ellipses, rects, polygons) to the SVG layer in the world map. The map's mouse wheel zoom remains smooth in IE/CH/FF. Each element has a lat/lng value, converted to the needed x,y values to translate each element to the desired point. During map zoom level changes pan the shapes are automatically scaled and translated, maintaining their original size and position. Top⇧
03/15
Cursor Location in Leaflet SVG Layer As the cursor moves over the SVG Layer its x,y values are shown, along with the associated map lat/lng points being computed. Top⇧
03/15
Measuring Distance in SVG layer and the Leaflet Distance (in meters) is used to create elements. e.g. width/height of a rectangle, and radius of a circle, etc. This shows a line connected to lat/lng value(0,0), which is the SVG layer x/y point(400,200), that follows the cursor. The length of the line is shown both in pixel length in the SVG layer and its length in the map(meters). Top⇧
03/15
Draw an SVG Element on the Leaflet World Map This draws an svg circle into the SVG layer at zoom level 1. Its center point is lat/lng(0,0), x/y(400,200). It has a requested radius of 800 km. Before the circle can be drawn, the requested radius value must be converted to svg pixels. During map zoom level changes, the circle's center is moved to maintain its location. It is not scaled, as the symbols are, but keeps it actual size(radius=800 km) during all map zoom levels. Therefore, this requires that its pixel radius must be re-computed (the circle is scaled) at each map zoom level change. Top⇧
03/15
Import SVG Paths into the Leaflet World Map This places svg paths that have been created in another application, and locates them in the Leaflet map. The imported paths must include two(2) Key Points that are also shown on the Leaflet Map. These points allow for the imported paths to be properly located. This example uses two street intersections in nearby the Yale University Campus in New Haven, Conn. as the key points. SVG paths have been placed at the Yale Law School. Top⇧
07/16
Add SVG Elements to the Leaflet World Map This is a web application at Lsvg.org to add SVG elements to any Leaflet Map. The elements are created, stored, and edited online. The created elements are stored in an svg file and automatically ported to your Leaflet Map. Elements added are: symbols, icons, images, paths, rectangles, polygons, circles, ellipses and text. Top⇧
07/16
Add Layers & Elements to Lsvg Maps After you have created your Leaflet Map via the Lsvg Template, you may modify the Lsvg elements, add markers, layers, plus add other SVG layers with their elements. Top⇧
08/16
Leaflet SVG Application: Emerald Map Places
Create a private online map for anywhere in the world
This is a demonstration of how SVG can be added via a user in Leaflet to insert symbols, images, paths, and text. The application applies the auto-positioning of the elements during zoom/pan of the map to maintain position and size.. *The Chrome Browser is preferred when viewable across PC's, Smart phones, and Tablets. To access the site:Emerald Map Places.
Top⇧
06/15
Leaflet SVG Application: Emerald Map Communities
Create a shared online map for anywhere in the world
This is a demonstration of how SVG can be added via a user in Leaflet to insert symbols, images, paths, and text. The application applies the auto-positioning of the elements during zoom/pan of the map to maintain position and size.. *The Chrome Browser is preferred when viewable across PC's, Smart phones, and Tablets. To access the site:Emerald Map Communities.
Top⇧
06/15
Leaflet SVG Application: Emerald Map Pictures
Create a zoomable online background Image
This is a demonstration of how SVG can be added via a user in Leaflet to insert symbols, images, paths, and text. The application applies the auto-positioning of the elements during zoom/pan of the background image to maintain position and size.. *The Chrome Browser is preferred when viewable across PC's, Smart phones, and Tablets. To access the site:Emerald Map Pictures.
Top⇧
06/15
Turf.js and Leaflet World Maps
Turf.js is a powerful modular geo-spatial engine written in JavaScript, that helps create spatial analysis in Mapbox/Leaflet. Turf uses a GeoJSON data type format. Turf improves the utility of interactive maps by bringing the spatial analytics into the mix. Note: examples use the all-modules turf.min.js (750K) v4.5.2, and Mapbox.js v3.1.1
SVG Font Icons
Literally thousands of SVG icons can be placed in an application with minimal overhead. Fonts provide a rich choice of low-impact svg icons. SVG path files, which are available for Unicode fonts, are not required since all browsers include the icon fonts listed here: Arial Unicode MS, Webdings, and Wingdings. They can be accurately sized and placed within an application that requires svg symbols. Included in this example is a list of over 200 SVG font icons, showing how to place them in your application.

Each font intrinsically has a different size: Their native width and heights vary. To size each one, and place it accurately, requires a built-in offset. All icons are created with their center at(0,0), and are thereafter sized and located via a transform applied to each. A JSON object is provided that can build these SVG font icons and is portable to other applications.

List Of SVG Font Icons This uses an array to load HTML fonts icons. Each font is shown with its required font family and either the Unicode or Hexadecimal code. Top⇧
03/15
Create SVG Font Icons Select the desired icon and its font size. It will be created and the 'native' width/height of each SVG font is determined, via its getBBox. Each is then offset so its center is at(0,0). It will be placed in the svg application via translation of x,y values. Top⇧
03/15
SVG Font Icons Object Instead of storing the icons in remote svg files, a JSON object has been created. Rather than calling files that store the icons, the object builds each font icon at the client as needed. Top⇧
03/15
D3: Plotting Point Symbols
This application uses D3 to create the plot's x/y axis and a grid. A polygon symbol is located at each data point. The data for the examples below is 10,700 JSON values. Each point has a Band, Magnitude, and Julian Date. The Band determines the symbol, Magnitude is the Y-axis, and Date is the X-axis
Build X,Y Axis This uses the Data to build build x,y axis and place range values. Top⇧
03/17
Create A Grid This places a background grid coordinated with the X,Y axis. Top⇧
03/17
Plot Symbols This places the symbols in the plot. Top⇧
03/17
Change Data As data changes, the axis ranges automatically change and symbols are added/removed seamlessly. This D3 feature is called Data Joins. This example also shows smooth transitions between previous data values. Top⇧
03/17
Box Expand Plot Create a 'Box' that selects a specific segment of the plot and expands into it, showing only the symbols it contains Top⇧
03/17
Print Plot & Attach Data Annotate Print: When printing a plot, attached data boxes to the various symbols. Top⇧
03/17
D3: Plotting Curves for 2 Sets of Data Versus a Formatted Date
This application uses D3 to plot data along a time-formatted x-axis, versus dual y-axis values. It builds a pair of smooth SVG paths, each with a fill color. Each data point is an SVG circle whose x,y values are displayed when the cursor moves over the point. The plotted curves are zoomable to allow for viewing of tightly packed points. The following D3 features are used: d3.time.format, d3.time.scale, d3.svg.axis, d3.scale.linear, d3.svg.area, d3.svg.line, svgPath.interpolate("monotone"), and d3.behavior.zoom
Timeline - Date Format at X-Axis This provides a selection of various date formats that builds the X-Axis, its tick points, and value placement. The X-Axis automatically extends from the minimum to maximum time value, with evenly-spaced tick marks. Top⇧
03/16
Create 2 Y-axis (left/right) This will place a Y-Axis at each end of the X-Axis. The values and tick marks will be shown. Top⇧
03/16
Create Plot Curves This will draw the paths for each Y-Axis. Each includes a pair of paths: One path is used to provide a fill(area) color, the second path is the line. Top⇧
03/16
Place Data Circles This will place a circle at each data point. Cursor over the circle will show its values. (This also includes the above features) Top⇧
03/16
Zoomable Plot The plot can be zoomed to view tightly packed points. Use mouse down to drag, and mousewheel to zoom in/out. (This also includes the above features) Top⇧
03/16
Zoomable Plot: Temperature vs Humidity vs Wind Speed Three(3) Y-axis are shown. The plot can be zoomed to view tightly packed points. Use mouse down to drag, and mousewheel to zoom in/out. When the cursor is moved over a point it, and its companion point, are highlghted. Top⇧
03/17
SVG's Ultimate 'Scalable' Challenge: The Universe
The universe is big, being 93 billion light years in diameter. With SVG it is possible to accurately zoom into the universe and graphically show the surface of any star. This application will show the complete zoomable/rotatable universe, with earth at center. The user can then choose a star in which to zoom into at its surface. The star's segment of the universe will be zoomable, and the star will be shown at its actual size. To maintain accuracies at a star's surface requires attaining an SVG scale of 50,000,000,000,000. This is possible by using D3 (Thanks to Mike Bostock and his cohorts) plus the browsers' (finally) recognizing the substance of SVG in your web page.
The following D3 features are used: d3.geo.mollweide, d3.geo.path, d3.geo.graticule, d3.geo.zoom, and d3.behavior.zoom
The Celestial Sphere A scaled universe is created as a sphere. It includes graticule lines, plus it can be zoomed and rotated. For web viewing, it is best to show the sphere as an ellipse. Therefore a Mollweide Projection in employed. Top⇧
03/16
Add Stars to the Universe Although there are 120,000 named stars available, only the 140 traditional-named stars are shown in this application to choose from. The data associated with each star provides the means to locate the star in the universe and give it an actual size in relation to our sun. Top⇧
03/16
Choose A Star The chosen star will be selected, and the universe will be re-scaled to reach a zoom level of 50,000,000,000. You may zoom the universe into the surface of the star, shown at its actual relative solar size. *FF has a problem with double click event on the star. Top⇧
03/16
Show All Stars This example shows how to add 120,000 visible stars to the universe. Top⇧
07/16
Use Fabric.js to 'Fine-tune' the placement/size/rotation of a bunch of SVG elements
Create a canvas with your elements 'roughly' sized/located. Dynamically change elements within the Canvas and convert to SVG. Drag/Drop, resize, and rotate any element within the canvas.
A Bunch of Elements You have SVG elements you want to arrange, but do not want to manually compute location/size/rotation of each. Top⇧
09/16
Dynamic SVG foreignObject
Typically, this is used to place HTML elements inside the root SVG element. Works nicely for input elements, textarea, tables, select elements, DIVs, etc. Accepts all CSS3 for great effects. Elements with text are automatically arranged via HTML. These examples dynamically create and position the foreignObject so it fits snugly at its desired location in its parent SVG.
** Not fully supported in Firefox.
Place a DIV Center a DIV within its SVG parent. Uses htmlElement.getBoundingRect() to determine its center point and size. Then the foreignObject is translated to its SVG location. Top⇧
09/16
Drop-Down Menu Position a <select> within its SVG parent. The select is at the Upper-Left of the SVG: Left and top values are 0 px. Top⇧
09/16
Run a Spinner Start a 'Spinner' located at the center of the parent SVG. The Spinner and its animation is css-created Top⇧
09/16
Place Code in TextArea Place code/mark-up text in the SVG. Top⇧
09/16
Place Buttons Locate HTML buttons in the SVG. Top⇧
09/16
HTML Table & Input Elements An HTML table, within a foreignObject provides an efficient means of automatically aligning HTML input elements, buttons, etc via the HTML table element, rather than attempting to position each element in the SVG drawing, which can be tedious.
NOTE: This works well in all browsers, except Firefox. It corrupts the parent HTML.
Top⇧
10/17
Transformed Iframes Add iframes and transform them inside SVG Top⇧
09/16
Bridge SVG Across HTML Include a foreignObject DIV then place svg elements above the HTML. Top⇧
03/17
Drag DIV in SVG Include a draggable foreignObject DIV within the SVG root. Top⇧
03/17
Zoom Into Foreign Object A HTML input text element and input range element(slider) are placed, as foreignObjects, shown at the center of an SVG circle. The foreignObjects can be zoomed in/out via the mousewheel. Adjust the slider to change the text element values. Top⇧
09/17
SVG 3D Geometric Solids
Each face of the geometric solid is a path whose points have been computed via 3-d vector methods. Included features are: rotation, shading, moving, zoom, light source location, and viewer position.

Shown are the Platonic solids (tetrahedron, hexahedron, octahedron, dodecahedron, and icosahedron) and the Archimedean solids (truncated tetrahedron, cuboctahedron, truncated cube, truncated octahedron, rhombicuboctahedron, truncated cuboctahedron, snub cube, icosidodecahedron, truncated dodecahedron, truncated icosahedron, rhombicosidodecahedron, truncated icosidodecahedron, and snub dodecahedron)
Show SVG 3D
Customize: SVG 3D Geometric Solids Create a Plantonic or Archimedean Geometric Solid and copy it for other applications. Customize size, rotation, color, shading, light source, and viewer position. Save the source to an .svg file. Top⇧
10/16
SVG 3D Regular Polygons Select the type of polygon and the desired 3D 'thickness'. Adjust size, rotation, color, shading, light source, and viewer position. Save the source to an .svg file. Top⇧
11/16
SVG 3D Create Convex Irregular Polygons Provide the vertices of the polygon's points and the 'thickness' value. Adjust polygon size, rotation, color, shading, light source, and viewer position. Save the source to an .svg file. Top⇧
11/16
SVG 3D Create Tile Units A Tile Unit is a group of tessellated regular polygons. (The Tile Units also tessellate to fill an area.) Select from over 1000 tile units and provide the 'thickness' value. Adjust tile size, rotation, colors, shading, light source, and viewer position. Save the source to an .svg file. Top⇧
11/16
SVG 3D Create Paths Create 3d svg paths. Insert the 'd' attribute value. Adjust size, rotation, colors, shading, light source, and viewer position. Save the source to an .svg file. Top⇧
11/16
SEEN.js SVG 3D Geometric Solids The SEEN.js library creates and animates SVG 3D geometric solids. There are 120 geometric solids: Platonic, Archimedean, Prism, Antiprism and Johnson. Top⇧
07/17
Server-Side SVG Updates: Classic ASP + Javascript
In many cases interactive client svg modifications by users and database changes need to be updated to the server. There is no better means to updating SVG data at your IIS/Windows server than Classic ASP. In the following examples, Javascript, NOT VBScript, is used throughout in all ASP files. ASP files are used exclusively to create/update files/data at the server, not to build client-displayed HTML for web pages. Since SVG and XML are the same format, using the robust XMLHTTPRequest + Server.CreateObject("Msxml2.DOMDocument.6.0") + JavaScript all work together just dandy. The following examples introduce Classic ASP and will take you through the possibilities available for SVG server updates.
Setting Up Your IIS(localhost) & Windows Server
After ASP is activated at the IIS/Server, there are three(3) settings to address:
1.) Behavior > Enable Parent Paths > True. This specifies whether an ASP page allows paths relative to the current directory (using the "...\" notation) or above the current directory.
2.) Debugging Properties > Enable Client-side Debugging > True .
3.) Debugging Properties > Send Errors To Browser > True
Then select: Actions > Apply
Note: Folders where the files are modified should have full permissions: read/write/add/remove/edit its files and sub folders.
ASP's Request & Response.Write The ASP file's 'Request' statement is typically the xml/svg string sent to the file; converted to an xml object at the server.
The ASP file's 'Response.Write' defines what values you want to return to your client web page.
The 'responseText' is the value received at the client as the result of the Javascript in the ASP file
Top⇧
10/16
Debugging ASP JavaScript Errors When there is an error in your Javascript, the server experiences an error: 500 (Internal Server Error). It also sends, via responseText, an HTML-formatted error message specifying the reason for the error. Always include a DIV in your development web page to monitor ASP errors. Top⇧
10/16
Send SVG Change to Server An XML file is currently located at the server for your website. This example sends an SVG element change by the user, and saves it in the file. Note: Files requested in ASP must use the Server.MapPath method to access files. Top⇧
10/16
Send Current SVG to Server Send a copy to the server of the current SVG in your web page. This will create an SVG file and fill it with your svg elements. This example sends a copy of your client-side parent SVG plus its children, and copies it into the file. Top⇧
10/16
Create An SVG & XML file At Server This builds two new 'empty' files at the server, using Server.CreateObject("Msxml2.DOMDocument.6.0") to initiate each file at the server. The header for the XML file uses createProcessingInstruction. The header for the SVG file uses createElement for the svg file. Top⇧
10/16
Create A Folder At Server ASP uses Server.CreateObject("Scripting.FileSystemObject") plus CreateFolder to build the folder. Top⇧
10/16
Get An SVG Element From File This example requests a specific element from an SVG file. The element is copied/returned as a string via responseText, converted into an svg element via DOMParser, then placed in the client SVG root. Top⇧
10/16
SVG Drag/Drop: User Interface & Upload Changes To Server This provides a user interface, allowing elements to be translated(drag/drop) with the changes sent back to the server. The user drag/drop changes are saved as XML for upload to the server. Top⇧
10/16
Create Client SVG & File At Server Build SVG at client and send SVG to Server and create a new svg file. Uses XMLSerializer and XMLHttpRequest, plus ASP/Javascript. Creates file at server with FileSystemObject. Top⇧
10/16
Create Data-Driven SVG File At Server This example assumes a database at the Server that is updated via another application. The updated Data file then fills your client SVG. Top⇧
10/16
Update JSON File With ASP ASP does not include JSON. However, you can include JSON at ASP via <!-- #include file ="json2.js" --> Where the Javascript code in the file is preceded by <% and ended by %>. (Any Javascript file can used in an ASP file via #include, if its code is enclosed by <% and %>.) Top⇧
10/16
SVG Replicate
Replicate builds and animates spectacular SVG 3d-like graphics by repeatedly copying an element, and modifying its attributes. See: Path Example
In 2010 Replicate was introduced by David Dailey, who continues to support it. At that time the browsers had problems with it. However, presently all browsers can easily handle it. Therefore, examples are provided below to re-introduce the concept and demonstrate the capabilities of Replicate.
Replicate Basics This example shows the basic replicate feature and demonstrates it using a polygon, ellipse, and rectangle. Each element is transformed and includes a dynamic linearGradient as fill. Top⇧
11/16
Replicate RGB Color Control Colors of a replicated element can be set to transition from one color to another during the replicate process. Top⇧
11/16
replicateAttribute Values Attribute Each replicateAttribute element defines the desired changes to an element's specific attribute (e.g.: x, y, fill, transform, etc.). It includes the to and from values, or it defines values for various segments. This example shows how the values are used to define segments, in lieu of a single to/from pair, to transition through its values. Top⇧
11/16
Replicate Animate Any attribute can be animated in replicate: Include the <animate> element to an element to be replicated. *IE has problems with <animate>. Top⇧
11/16
Replicate Animate Transform The transform attribute can be animated in replicate: Include the <animateTransform> element to an element to be replicated. *IE has problems with <animateTransform>. Top⇧
11/16
Replicate Attributes Follow Path A replicated element attributes can be arranged to follow a path. Top⇧
11/16
Replicate Modifier Spectacular colors can be displayed using <replicateModifier> to adjust gradients and filters as we replicate. Top⇧
11/16
Replicate Dual Paths An ellipse is the replicated element. Two paths are used as replicatePaths. One is used to modify the cx,cy values of the ellipse. The other is used to modify rx,ry values of the ellipse. Also, the fill is sent values that modify the colors during replication. Top⇧
11/16
Replicate Animate & Transform An ellipse is the replicated element. Both the <animate> and <replicateAttribute> elements are included. Top⇧
11/16
Rotating Raindrop Two ellipses are used in the replicate example. Their gradient fill is rotated. Top⇧
11/16
Shape Ellipse creates a nice shape by morphing the attribute values. Top⇧
11/16
Life D3 participates in the Replicate concept. Top⇧
02/17
Gallery
Rotation Kleinish Bottle Modifier Nested 3-d Monkey Bars Scary Box UFO D3 Space Worm
SVG Analog Gauge Object
This is a round configurable gauge object with a dial face. The dial transitions smoothly during value changes, using D3 version 4. Also includes digital value, green zone, red zone, and orange zone on the dial face.
Snap.svg (version:0.5.1)
This Javascript library is very usable across current browsers to create dynamic SVG. Many of its features represent those considered in SVG's future features. Snap was written by the author of Raphaël (Dmitry Baranovskiy) and is properly supported (See: Issues).
Snap provides the ability for animating and manipulating both existing SVG content, and SVG content generated with Snap. Examples below demonstrate the methods listed at http://snapsvg.io/docs/
Getting Started This begins the Snap object and builds some basic svg shape elements. Top⇧
04/17
Transform Strings Adding transform strings to elements Top⇧
04/17
Transform Matrix Adding transform matrix to elements Top⇧
04/17
Drag Elements Elements are added and draggable Top⇧
04/17
Group Elements Elements are created and placed in a group. Top⇧
04/17
Animate Elements Elements are created and animated. Top⇧
04/17
Snap.svg API Examples A listing, and example, of each Snap API feature. Top⇧
04/17
Element Placement Techniques Snap provides various methods of arranging previously created elements: Snap.group, elem.after, elem.append, elem.appendTo, elem.before, elem.insertAfter, elem.insertBefore, elem.prepend, and elem.prependTo. This example shows the difference in rendering placement between each method. Top⇧
04/17
Path Methods Snap provides substantial methods applied to paths:
path.getPointAtLength, Snap.path.getPointAtLength, path.getSubpath, Snap.path.getSubpath, path.getTotalLength, Snap.path.getTotalLength, path.getBBox, Snap.path.getBBox, Snap.parsePathString, Snap.path.bezierBBox, Snap.path.findDotsAtSegment, Snap.path.intersection, Snap.path.isBBoxIntersect, Snap.path.isPointInside, Snap.path.isPointInsideBBox, Snap.path.map, Snap.path.toAbsolute, Snap.path.toCubic, and Snap.path.toRelative
This shows examples of the various methods.
Top⇧
04/17
SVG Test GLOB Create inline svg with random circles, ellipses, polygons, and rectangles used for Snap.svg test environment. Each element includes the drag() feature or continuous rotation(CSS). Top⇧
04/17
Snap.svg Animation Examples This provides examples of Snap.svg animations. They use element.animate() to change element attributes, and Snap.animate() to run an animated setter function. Note: Snap.animate() includes the stop/pause/resume functions. Top⇧
04/17
Snap Load SVG File This uses Snap.ajax() to load an .svg file. It shows a full fragment insertion of the .svg file elements. It also demonstrates xml methods to access/change/add elements from the .svg file. Top⇧
04/17
SVGjs Animations (version:2.6.1)
A compact Javascript library to create and animate SVG. Its animations are cross-browser, powerful, seamless, and the best of SVG libraries. It was created by Wout Fierens. SVGjs is well documented at SVGjs and encourages reporting issues. It has a substantial selection of supported plugins.
Examples below demonstrate the methods available in SVGjs and various plugins.
Getting Started This begins the SVGjs object and builds some basic svg shape elements. Top⇧
05/17
Element Transform Methods SVGjs has some built-in shortcut transform methods that can be applied to elements: flip(), rotate(), skew(), scale(), and translate(). Top⇧
05/17
Element Draggable A plugin extension for the SVGjs library to make elements draggable. Top⇧
05/17
Group Elements Adding elements to a group Top⇧
05/17
Animate Element A rectangle moves and returns to original position. It is continuous, and includes pause/play button. Top⇧
05/17
API Examples A listing, and example, of each SVGjs API feature. Applicable animations are included within each feature. Top⇧
05/17
Element Referencing SVGjs provides various methods of arranging previously created elements:
elem.add, elem.addTo, elem.after, elem.before, elem.back, elem.backward, elem.front, elem.forward, elem.put, elem.putIn, and elem.toParent
This example shows the difference in rendering placement between each method.
Top⇧
05/17
Element Transformation SVGjs offers four(4) means to set/get & animate element transforms:
(1) myElement.attr({transform:'transform strings'}), (2) myElement.transform({key:value}), (3) myElement.transformMethod(value), (4) myElement.transform(matrix).
This shows examples of each.
Top⇧
05/17
Plugin Extensions SVGjs provides the following current plugins:
connectable, easing, draw, draggable, filter, foreignobject, intersections, math, pathmorphing, resize, screenbbox, select, shapes, textmorph, topath, and topoly
This example shows the an example of each plugin.

Top⇧
05/17
SVGjs Animation Examples This provides examples of SVGjs animations. They use element.animate() to change element attributes and method values. It includes during() and after() to run animated setter functions. Top⇧
05/17
SVGjs Dynamic Markers This provides examples of SVGjs marker element. They can be dynamically created, changed, and animated. Top⇧
05/17
SVGjs Load SVG File This uses XMLHttpRequest to load an .svg file. The loaded svg is placed as a child of SVGjs root svg element, via mySVG.svg(svgFileString). Top⇧
05/17
Three.js: SVG 3D in an Interactive & Animated Environment

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.

It was first released by Ricardo Cabello (mrdoob) to GitHub in April 2010.

The examples below are using version r86. Note: If you are interested in understanding Three.js, view this excellent Tutorial.
Locate SVG In 3D ThreeJS WebGLRenderer has created a 3D cube, sphere, and floor texture. An SVG root with a circle element is inserted at its center via CSS3DRenderer and CSS3DObject. (Its outline is shown via the dashed lines.) Therefore the SVG will track, in the 3D environment, via orbitControls. Use the sliders to adjust the x/y/z position of the SVG. Top⇧
09/17
SVG Fixed In 3D ThreeJS WebGLRenderer has created a 3D cube, sphere, and floor texture. An SVG root with a circle element is inserted at its center via CSS2DRenderer and CSS2DObject. (Its outline is shown via the dashed lines.) Therefore the SVG will remain fixed in size and location, in the 3D environment, via orbitControls. Use the sliders to adjust the x/y/z position of the SVG. Top⇧
09/17
Basic SVG Elements - SVGRenderer You can place a 2-D SVG element on the Three.js drawing. This example uses SVGRenderer() and SVGObject() SVGRenderer() creates a root SVG element. Each request for the SVGObject() appends an SVG element to the root. Top⇧
06/17
Extrude SVG Shapes You can place any SVG shape element in the Three.js enironment. This example uses WebGLRenderer() plus the ExtrudeBufferGeometry() for each SVG shape. SVG shape element vertices are created from a Polygon Conversion function. Top⇧
06/17
Insert SVG Drawing This places an SVG drawing as 2-D in the Three.js environment. This example uses SVGRenderer() and SVGObject(). It locates and sizes each element matching the three.js drawing to the SVG drawing. Top⇧
06/17
Insert SVG Drawing - Drag/Drop Events This places an SVG drawing as 2-D in the Three.js environment. This example uses SVGRenderer() and SVGObject(). It locates and sizes each element matching the three.js drawing to the SVG drawing. Each element can be drag/dropped in the Three.js drawing. Top⇧
06/17
Extrude SVG File You can add an SVG shape file into the Three.js animated environment. This example uses SVGLoader, WebGLRenderer() plus the ExtrudeBufferGeometry() for each SVG shape. SVG shape element vertices are created from a Polygon Conversion function. Top⇧
06/17
SVG 3D Animation Interlaces SVG, Canvas, WebGL, and Three.js to animate svg shapes in a 3 dimensional enviornment. This example places 1000 svg star polygons in the rotating Three.js universe. Top⇧
06/17
SVG 3D Events SVG shapes are placed in a Three.js 3 dimensional enviornment. This example places events on the svg shape elements. Top⇧
06/17
Extrude SVG Polygon An extruded polygon star is placed in Three.js 3 dimensional enviornment. Top⇧
05/17
Extrude SVG Shapes - Animate This extrudes svg shapes: circles, rects, ellipses, polygons, and paths. It places them in the Three.js 3 dimensional animated environment. Top⇧
06/17
Load SVG Files This example calls various SVG files into the Three.js 3-dimensional environment Top⇧
06/17
Interactive SVG File This places an svg file into the Three.js 3-dimensional environment. The svg elements are fully interactive with both the SVG and the 3-dimensional environment. This example shows the svg with its independent anmations running. Top⇧
06/17
Polygon Sprites An SVG file contains 40 polygon sprites. This shows examples of placing the sprites into the Three.js 3-dimensional environment. Top⇧
06/17
Interactive Polygon Sprites This shows rotating sprites connected by lines that adjusts to their location in the Three.js 3-dimensional environment. Top⇧
06/17
SVG Icon Sprites A JSON Object contains over 200 Icon sprites. This shows examples of placing the sprites into the Three.js 3-dimensional environment. Top⇧
06/17
Insert Three.js Into SVG Place a Three.js application into your SVG drawing. Each is interactive with the other. The Three.js application is located in an iframe foreignObject.
* IE11 does not support foreignObject.
Top⇧
06/17
Helper: Object Placement Locating and sizing objects in the 3-D environment can be tricky. This helper allows you to manually adjust their placement, and obtain the values needed to properly locate/size your objects. Top⇧
06/17
SVG 3D Geometric Solids Add SVG 3D Geometric Solids to Three.js. The svg geometric solid file has been created at Geomtric Solids Top⇧
06/17
SVG 3D Polygons Add SVG 3D regular polygons to Three.js. The svg polygon file has been created at 3D Polygons Top⇧
06/17
3D Scatter Plot This is a 3-dimensional plot of a star's magnitude changes during a 100 day period. It includes X/Y/Z axes and their data labels. Top⇧
07/17
Star Follows Ellipse An SVG star polygon is extruded and follows the path around an extruded ellipse. Top⇧
07/17
3D Spherical Graticule Combines D3 with three.js to create a spherical graticule, and randomly distributes SVG elements (icons) within the graticule. Top⇧
07/17
3D Elliptical Graticule Combines D3 with three.js to create a elliptical graticule, and randomly distributes SVG elements (icons) within the graticule. Elliptical graticules are ideal for browser screen size viewing. Top⇧
07/17
GeoJSON & Three.js Examples using GeoJSON data in Spherical and Elliptical 3D environmets, that can include graticule lines. Up to 500,000 data points are displayed as color-coded particles. Top⇧
07/17
Examples - Animating SVG Within Three.js Interlaces both WebGL and CSS3D renderers. SVG is added via CSS3DObject and independently animated. Top⇧
07/17
SVG Updating ThreeJS
This shows examples of interlacing SVG with the ThreeJS canvas to create and control the ThreeJS graphics. An SVG companion drawing has direct access to the ThreeJS canvas. It can dynamically change SVG elements and their animation performance. This uses three(3) renderers: CSS2DRenderer and CSS3DRenderer for the SVG, plus the WebGLRenderer as the base ThreeJS. These examples present the possibility of sending the changed ThreeJS to your server so viewers can observe dynamic changes to your website's ThreeJS canvas.
Top⇧
09/17
Hello World! An SVG text element is created/updated in SVG and sent to ThreeJS. Dynamically change the text by typing new characters into the 'Change text in SVG' text input element. The SVG text element can be drag/dropped. Top⇧
09/17
Draw Circles This places circles in the SVG drawing and sends them to WebGL. Set the radius and color then click a point on the SVG drawing to place the circle. Each circle can be drag/dropped. Select 'Start Over' to remove all circles.

Top⇧
09/17
Draw Arrow Lines Click on the SVG drawing to set the start point of a line. This will place the line in ThreeJS and track the cursor until the end point of the line is clicked on the SVG drawing. Start another line after the second point of the previous line has been set. Top⇧
09/17
Draw Path This builds a smooth-curve path in the SVG drawing, showing it in WebGL. Click points on the SVG drawing to set the path points. Select "Pause" to drag/drop the small circles at each point. Select 'Restart' to continue to add points. After three(3) points have been placed, you may select the 'Close Path' checkbox to connect the last point to the first point. Select "Cancel" to start over. Select 'Finish' to complete the path. The path can be drag/dropped after it is finished. Top⇧
09/17
Upload SVG Images ThreeJS shows a rotating cube with the image on each side. An SVG image file, in base64 data format, is sent from SVG to ThreeJS as texture for the mesh. Select the SVG file from the dropdown selector menu. Select 'Stop/Start' button to stop/start rotation of the cube. Top⇧
09/17
Animate Pendulum Clock This places an animated SVG pendulum clock into ThreeJS. It can be stopped/started via a button in SVG. Top⇧
09/17
Add Icon Sprites The SVG icons are stored in a JSON object. They are text elements with Unicode values for symbols. Clicking the desired checkbox places the sprite as a text element and sends it to ThreeJS. Also, you can drag/drop the icon in SVG and it will updated in ThreeJS. Top⇧
09/17
Add Polygon Sprites The SVG polygons are stored in a hidden SVG drawing, available to clone the requested polygon. Clicking the desired checkbox and click on the SVG drawing to locate it and send it to ThreeJS. Also, you can drag/drop the icon in SVG and it will updated in ThreeJS. Top⇧
09/17
Add 3D Geometric Solids The SEEN.js library creates SVG 3D geometric solids. There are 120 geometric solids: Platonic, Archimedean, Prism, Antiprism and Johnson. Select the solid from the drop-down selector menu to place it in SVG which will send it to ThreeJS. Use the cursor to spin/rotate the solid in SVG. The solid can be drag/dropped when the 'Drag/Drop' checkbox is checked. Top⇧
09/17
Animate Drawing SVG Shapes Various animations are running smoothly at the same time, and in sequence. Arranged to run either in series or parallel. This example draws circles and lines into ThreeJS. Select the 'Start' button to begin the drawing. You can drag/drop the drawing by selecting any circle in the drawing and drag it. After the drawing is complete, select the 'Reset' to clear the drawing. Top⇧
09/17
Draw 3D SVG Polygons This example places a 3D regular polygon into ThreeJS. Select the type of polygon and the desired 3D 'extrusion'. Adjust size, rotation, color, shading, light source, and viewer position. You can drag/drop the polygon. Top⇧
09/17
GreenSock SVG Animations
The GreenSock Animation Platform (GSAP) is a suite of tools for creating scripted animations, and it is one of the most powerful JS animation libraries available today. GSAP comes with a mature API that covers the vast majority of animation use cases. The strength of GSAP is its animation sequencing capabilities. You can create individual tweens to animate just about any property of an element. You can also chain tweens into a timeline, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can nest timelines inside other timelines.
GreenSock API Documentation - Alphabetical List
Morph SVG Polygons This is a example morphs between regular polygons. It uses file: TweenMax.min.js and CSSPlugin.js. Top⇧
06/17
Animate Transforms This is a example animates transforms on the rectangle. It uses file: TweenMax.min.js and plugin: CSSPlugin.js Top⇧
06/17
Animate Element Attributes This introduces the GreenSock method TweenLite.to(myElement, duration, {attr:{attribute:value}}) which can animate essentially all attributes. Top⇧
06/17
Drag Element This is a example drags a rectangle. It uses files: TweenMax.min.js, and util file: Draggable.min.js Top⇧
06/17
DrawSVG: Animate Stroke Sophisticated SVG drawings can created by means of animating the stroke on an element. It uses files: TweenMax.min.js, DrawSVGPlugin.min.js
This is a basic example.
Top⇧
06/17
Compare Easing Functions This compares the the performance of the core animation easing functions in GreenSock. Top⇧
06/17
Load SVG File & Animate its Elements This calls an svg file, loads it, and animates its elements. Top⇧
06/17
Animation Examples This provides examples of GreenSock animations. It uses file: TweenMax.min.js with easing function return values (0.0 thru 1.0) onUpdateParams to animate svg elements. Top⇧
06/17
React + Babel & SVG
React allows you to create your own encapsulated HTML element that has a customized UI and functionality. This shows examples of inserting SVG into the React/Babel environment. React's virtual DOM is used for efficient re-rendering of the DOM:
It maintains a virtual dom in addition to the “real” dom in the browser. When state is updated or when ReactDOM.render() is invoked, it can look at the differences between the virtual and real DOM’s and generate a minimal changeset of DOM manipulations to reconcile the real dom to the virtual one. Visit React's tutorial
Top⇧
08/17
SVG Hello World An SVG root has a text element added and React adds a text element updates it Top⇧
08/17
Wtf is JSX? React/Babel has a neat feature where you can easily build your own React DOM element by merely writing it in XML format. This is called 'JSX' which means 'Javascript XML'.
e.g. <myElement myAttr1={value1} myAttr2={value2} myAttr3={value3} /> That's It!: The values {value} can be inserted as a string, number, function return, or argument.

To create a JSX SVG element you can use all standard attribute names associated with that SVG element. Note, however, attribute names separated with the dash (-) require camelCase conventions (strokeWidth = stroke-width, fillOpacity = fill-opacity, etc.).
Top⇧
08/17
Create SVG Root & Animate <rect> Create a React <svg> root element. Then create a React <rect> 'template' via React.createElement(), attaching props (properties) to it. Properties allow for the element's fill to be changed every millisecond via a React.render() request. Top⇧
08/17
Dynamically Insert SVG Elements This example dynamically builds and renders an array of rects, circles, plus ellipses. It uses React.createClass to build an object (<SVGElems />) holding all elements. Note: Each element must have a unique key; e.g. key={myKey} Top⇧
08/17
SVG <rect> Ready For Prime Time Includes the following on the SVG rect element: class, super, state, and key This may be applied to dynamic control of the element. See: State and Lifecycle Top⇧
08/17
Interlacing Babel, Javascript & HTML You may 'register' a Babel function or variable into the HTML document. After it is declared in Babel, use window["myFunctiom"]=myFunction to make it available. This will also expose it to Javascript.


A 'Run Again' button, placed in the HTML document, can be used to restart the animation by a call to a 'registered' function in Babel. Also the value in the 'Render Count' input text element is sent from Babel. The 'Is Render Running' value is filled via local Javascript function isRenderRunning().
Top⇧
08/17
Animate SVG Elements This example dynamically builds and renders an array of rects, circles, plus ellipses. It uses React.createClass to build an object () holding all elements. After the element is rendered in the DOM, onclick events are included on the ellipse as an attribute value. Click on an ellipse to start its rotation animation. Top⇧
08/17
Attach Events To SVG Elements This example dynamically builds and renders an array of rects, circles, plus ellipses. It uses React.createClass to build an object (<SVGElems />) holding all elements. The onClick event is included as an attribute value when the React element is created. Click on an element to change its fill color. Top⇧
08/17
Animate 200,000 Circles This example dynamically builds and renders an array of 200,000 circles. It uses React.createClass to build an object (<SVGElems />) holding all elements. It also animates each of their fill colors, changing 100 ms. Note: Each element must have a unique key; e.g. key={myKey}, which provides efficient access to each element. Top⇧
08/17
SVG Rectangle Grid Each grid cell is an SVG rect element. Use the slider to change the size and quantity of the grid cells. Over 1000 cells can be created. Top⇧
08/17
SVG Symbol Element Create a SVG symbol element: <Symbol />. It includes a circle, rect, and ellipse. Each symbol includes a transform attribute, used to locate and scale each. 5,000 symbols are rendered. Select the 'Rotate Symbols' to find the first and last symbol, then set their scale to 1.5 plus rotate. Top⇧
08/17
SVG 3D Geometric Solids The SEEN.js library creates and animates SVG 3D geometric solids. There are 120 geometric solids: Platonic, Archimedean, Prism, Antiprism and Johnson. Each solid is placed in React. The solid is rotating and its paths are shown as shading fill colors and points change. Top⇧
08/17
SVG Polygon Sprites The polygons are stored in an .svg sprite file. This extracts the desired polygon from the sprite file and adds 10 <use> elements for each selection. The elements are rotating at rate based on the slider selection. Top⇧
08/17
SVG Icon Sprites The SVG icons are stored in an .svg sprite file. They are text elements with Unicode values for symbols. This extracts the desired icon from the sprite file and adds 10 <use> elements for each selection. The elements are rotating at rate based on the slider selection. Top⇧
08/17
3D SVG + Three.js + React 3D polygons are extracted from a .svg file and intially placed in the Three.js environment. You may toggle the 3D SVG polygons between the React and Three.js environments. You can make changes to the 3D polygons while in the React environment: Click on a 3D polygon to change its opacity. Then return them to the Three.js environment. Top⇧
08/17
SVG In Control/Monitoring Systems
SVG is suitable to create Human Machine Interface (HMI) standards via interactive symbols and flow diagrams. Applies to commercial building systems: HVAC, Electrical, Energy Management, Industrial Processes, etc. This shows examples of various applications relating to features at a central monitoring facility.

(This segment will continue to be expanded...)
Top⇧
10/17
SVG On/Off Button Create an SVG image of an interactive SVG button, from a rectangle that includes linearGradient & radialGradient. Top⇧
10/17
Analog Gauge Object This is a round configurable gauge object with a dial face. The dial transitions smoothly during value changes, using D3 version 4. Also includes digital value, green zone, red zone, and orange zone on the dial face. Top⇧
10/17
Pilot Light Object - 5 States Create a monitoring pilot light that has five(5) states: ON, ALARM, INTERMITTENT, DEFECTIVE, AND NORMAL OFF. Each state has a different color. Top⇧
10/17
SVG On/Off Button with Analog Gauge Create an SVG Object of an interactive SVG button. Three(3) button objects are shown with an interactive analog gauge attached to a feeder line leaving the button.. Top⇧
10/17
Circuit Breaker - 'Local' Status with Central Monitoring Only Create an interactive SVG image object to monitor a Circuit Breaker. It includes an associated external manual disconnect switch. Each circuit breaker has a label. Also included is a blue arrow line leaving the circuit breaker. Top⇧
10/17
Circuit Breaker - 'Remote' Status with Central Monitoring Reset Create an interactive SVG image object to monitor/reset a Circuit Breaker. Allow the central panel the ability to reset the circuit breaker after it has tripped. It includes an associated external manual disconnect switch. Each circuit breaker has a label. Also included is a blue arrow line leaving the circuit breaker. Top⇧
10/17
Circuit Breaker - With Analog Gauge & Strip Chart Create an interactive SVG image object to monitor or reset a Circuit Breaker. Allow the central panel the ability to reset the circuit breaker after it has tripped. It includes an associated external manual disconnect switch. Each circuit breaker has a label. Also included is a blue arrow line leaving the circuit breaker. An analog gauge is included with a plotted strip chart for its values. Top⇧
10/17
Substation Digital Monitoring An HTML table, within a foreignObject provides an efficient means of automatically aligning HTML input elements, buttons, etc via the HTML table element, rather than attempting to position each element in the SVG drawing, which can be tedious.
NOTE: This works well in all browsers, except Firefox. It corrupts the parent HTML.
Top⇧
10/17
Control/Monitoring Diagram Library You may copy diagrams and symbols stored in the library for your application. This also provides a template for you to add or modify control system loop diagrams in the library. Each svg image in the library can be inserted in design documents, plans & specifications, and operating sequences (HTML, CAD, PDF, Excel, PowerPoint, MS Word, etc.). Each image can be easily scaled to fit its environment. Top⇧
11/17
Building Heating Hot Water System This shows a steam to hot water convertor controls. The central monitoring panel displays sensors, actuators, charts, graphs, gauges, and status pilot lights. Also the system's PID controller can be tuned at the central monitoring panel. Top⇧
10/17
AHU Supply Duct Static Pressure Control Static pressure is controlled via a Variable Frequency Drive(VFD) at the supply air fan. The central monitoring panel displays sensors, actuators, charts, graphs, gauges, and status pilot lights. Also the system's PID controller can be tuned at the central monitoring panel. Top⇧
11/17
SVG sidekick - Create & Copy/Save an SVG Drawing
My personal & elegant web app that can create, save, and edit an SVG drawing which includes: circles, ellipses, rectangles, paths, text, and polygon symbols. (I fine-tuned it somewhat so others can also use it.)
Firefox has problems with mousedown/right click which negates the ability to edit elements.
Top⇧
11/17
SVG's Future
This website presents examples of new SVG features that are either part of SVG2 or currently proposed. It shows if/when each feature is implemented within each browser. Please review each feature and provide your vote if you want it supported by all browsers.

D3 + SVG Symbol Plots Connected to HUGE Database using API Data Requests
I have built an active web application that showcases D3 and SVG. It is linked to over 30 million data points. I'm planning to retire from this project soon. Would anyone care to takeover responsibility for it? I will mentor you for a period of six(6) months, providing guidence in all the facets of this web application. I have placed a detailed documentation package online for you to preview. See: Documentation

Please contact me if you would be interested.