HTML5: Using SVG Graphics with CSS and JavaScript

Posted By Zermenay on June 19, 2012 | Posted in CSSHTML5JavaScriptSVG

3

Comments

Thanks to HTML5 SVG graphics no longer need to be included on a separate file in an HTML document via EMBED or OBJECT element. Rather, they can be embedded directly into the HTML document and can be adapted and changed with style sheets and JavaScript.

The SVG Graphics Elements

The SVG element is completely based upon the SVG graphics embedding. It allows the advantages of SVG graphics to be directly utilized within the HTML document. Some examples of how the SVG element can be structured are given below. The important thing to note here is that the initiation and ending of the command begins with the use of SVG itself, accompanied by the standard language commands of HTML

In addition to specifying the namespace xmlns, the command above also specifies the size of the SVG graphics. This command can be placed within the SVG element arbitrary SVG shapes for proper viewing. In the example above, a red ellipse is drawn with a green trim. The attributes cx and cy indicate the position of the ellipse, while rx and ry indicate the radius. The appearance of the ellipse is – as with other HTML elements too – defined by a style attribute. However, there are differences between the properties which can be easily identified by those designers who are familiar with HTML elements.

In addition to various elements available to create surfaces, lines and texts, there are some filters that can be used. A good example of this could be the creation of drop shadows illustrated in command below:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
  <filter id="schatten" x="-10%" y="-10%" width="150%" height="150%">
       <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </ Filter>
  <Ellipse cx="200" cy="100" rx="150" ry="50" style="fill: red; stroke: green; stroke-width: 2" filter="url(#schatten)" />
</ Svg>

The filters serve as the transferred position, size as well as an ID. Subsequently, the distance of the shadow feOffset, its blur feGausianBlur and the overall fade feBlend are also defined. The filter can, by means of its ID, be easily and effectively assigned thereof to another element.

SVG Shapes and Style Sheets

The SVG shapes and style sheets can also be structured using the CSS specifications of the HTML document, because normally the appearance of subscribed SVG shapes are defined by style sheets. An example is illustrated below:

<style type="text/css">
  ellipse {
    fill: red;
    Stroke: green;
    stroke-width: 2
  }
</ Style>

This field can be used as a specific style for multiple embedded SVG graphics in one place. As with the standard HTML elements, the designers can also use the SVG style sheet information for classes and identifying IDs, which can then be assigned to define the required SVG shapes.

SVG Shapes and JavaScript

The modification and adaptation of SVG shapes can also be aptly completed using the JavaScript application. Thus, both styles, attributes of forms and elements may be modified easily using the JavaScript application (see example below).

document.getElementsByTagname("ellipse")[0].setAttribute("cx", 50);
document.getElementsByTagname("ellipse")[0].setAttribute("cy", 75);

Thus, in addition to the appearance and position, the size of the SVG forms can also be simultaneously changed using the JavaScript.

Another important fact to consider here is that the JavaScript application can also import different files into the SVG elements. With features like createElementNS (), new elements (by specifying a namespace) can also be created and effectively used. Similarly, adding setAttributeNS () in the element with the namespace attributes can also provide a good structure.

In the example above, a new item is created, which is the image file image.png that is eventually shown within the SVG graphics.

Conclusion

With inline SVG graphics, you can not only embed it in an HTML document, but you can also be customize and manipulate it by using style sheets and the JavaScript.