Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: SVG Tutorial

  1. #1

    SVG Tutorial

    Advertisement

    SVG stands for Scalable Vector Graphics.

    SVG defines graphics in XML format.

    In our SVG tutorial you will learn about SVG.


    SVG is a language for describing 2D-graphics and graphical applications in XML.
    What you should already know

    Before you continue, you should have some basic understanding of the following:

    • HTML
    • Basic XML

    If you want to study these subjects first, find the tutorials on our Home page.


    What is SVG?


    • SVG stands for Scalable Vector Graphics
    • SVG is used to define vector-based graphics for the Web
    • SVG defines the graphics in XML format
    • SVG graphics do NOT lose any quality if they are zoomed or resized
    • Every element and every attribute in SVG files can be animated
    • SVG is a W3C recommendation
    • SVG integrates with other W3C standards such as the DOM and XSL

    SVG History & Advantages

    Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that have been involved in defining SVG.
    Advantages of using SVG over other image formats (like JPEG and GIF) are:

    • SVG files can be read and modified by a large range of tools (e.g. notepad)
    • SVG files are smaller and more compressible than JPEG and GIF images
    • SVG images are scalable
    • SVG images can be printed with high quality at any resolution
    • SVG images are zoomable (and the image can be zoomed without degradation)
    • Text in SVG is selectable and searchable (excellent for making maps)
    • SVG works with Java technology
    • SVG is an open standard
    • SVG files are pure XML
    Advertisement

    The main competitor to SVG is Flash.


    The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.


    Look at a directory of SVG enabled software and services.
    Viewing SVG Files

    All browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are available for free, as for example the Adobe SVG Viewer.

  2. #2

    SVG Example

    SVG is written in XML.
    SVG Example

    The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:


    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> stroke-width="2" fill="red"/>



    (To view the SVG source, open the example and right-click in the example window. Select "View Source".)

    Code explanation:

    The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.


    standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.


    The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements.


    The SVG code begins with the element, which consists of the opening tag and the closing tag. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version to be used and the xmlns attribute defines the SVG namespace.


    The SVG element is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines the radius of the circle.


    The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 2px wide, black "border".
    The fill attribute refers to the color inside a shape. We set the fill color to red.


    The closing tag closes the root SVG element and the document.


    Note: All opening tags must have closing tags!

  3. #3

    SVG In HTML Pages

    SVG files can be embedded into HTML documents with the tag, the tag, or the
    I Wish....

    It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:
    xmlns:svg="http://www.w3.org/2000/svg">

    This is an HTML paragraph


    stroke-width="2" fill="red" />


  4. #4

    SVG <rect>

    SVG has some predefined shape elements that can be used and manipulated by developers.
    SVG Shapes

    SVG has some predefined shape elements that can be used and manipulated by developers:

    • Rectangle
    • Circle
    • Ellipse
    • Line
    • Polyline
    • Polygon
    • Path

    The following chapters will explain each element, starting with the rect element.


    The Tag

    The tag is used to create a rectangle and variations of a rectangle shape.
    To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:rgb(0,0,255);stroke-width:1;
    stroke:rgb(0,0,0)"/>

    Code explanation:

    • The width and height attributes of the rect element define the height and the width of the rectangle
    • The style attribute is used to define CSS properties
    • The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
    • The CSS stroke-width property defines the width of the border of the rectangle
    • The CSS stroke property defines the color of the border of the rectangle



    Let's look at another example that contains some new attributes:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:blue;strokeink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9"/>

    Code explanation:

    • The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
    • The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
    • The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
    • The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)


    Define the opacity for the whole element:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:blue;strokeink;stroke-width:5;
    opacity:0.9"/>

    Code explanation:

    • The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)



    Last example, create a rectangle with rounded corners:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> height="100" style="fill:red;stroke:black;
    stroke-width:5;opacity:0.5"/>

    Code explanation:

    • The rx and the ry attributes rounds the corners of the rectangle

  5. #5

    SVG <circle>

    The tag is used to create a circle.
    The Tag

    The tag is used to create a circle.
    Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> stroke-width="2" fill="red"/>

    Code explanation:

    • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
    • The r attribute defines the radius of the circle

  6. #6

    SVG <ellipse>

    The tag is used to create an ellipse.
    The Tag

    The tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
    Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:



    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:rgb(200,100,50);
    stroke:rgb(0,0,100);stroke-width:2"/>

    Code explanation:

    • The cx attribute defines the x coordinate of the center of the ellipse
    • The cy attribute defines the y coordinate of the center of the ellipse
    • The rx attribute defines the horizontal radius
    • The ry attribute defines the vertical radius



    The following example creates three ellipses on top of each other:





    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fillurple"/> style="fill:lime"/> style="fill:yellow"/>

    The following example combines two ellipses (one yellow and one white):

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:yellow"/> style="fill:white"/>

  7. #7

    SVG <line>

    The tag is used to create a line.
    The Tag

    The tag is used to create a line.


    Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:





    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="stroke:rgb(99,99,99);stroke-width:2"/>

    Code explanation:

    • The x1 attribute defines the start of the line on the x-axis
    • The y1 attribute defines the start of the line on the y-axis
    • The x2 attribute defines the end of the line on the x-axis
    • The y2 attribute defines the end of the line on the y-axis

  8. #8

    SVG <polygon>

    The tag is used to create a graphic that contains at least three sides.
    The Tag

    The tag is used to create a graphic that contains at least three sides.


    Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:





    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:#cccccc;
    stroke:#000000;stroke-width:1"/>

    Code explanation:

    • The points attribute defines the x and y coordinates for each corner of the polygon



    The following example creates a polygon with four sides:

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:#cccccc;
    stroke:#000000;stroke-width:1"/>

  9. #9

    SVG <path>

    The tag is used to define a path.
    The Tag

    The tag is used to define a path.
    The following commands are available for path data:

    • M = moveto
    • L = lineto
    • H = horizontal lineto
    • V = vertical lineto
    • C = curveto
    • S = smooth curveto
    • Q = quadratic Belzier curve
    • T = smooth quadratic Belzier curveto
    • A = elliptical Arc
    • Z = closepath

    Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.


    Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:





    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg">



    The example above defines a path that starts at position 250 150 with a line to position 150 350 then from there a line to 350 350 and finally closing the path back to 250 150.


    The following example creates a spiral:

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:white;stroke:red;stroke-width:2"/>

  10. #10

    SVG Filters

    SVG Filters is used to add special effects to shapes and text.
    SVG Filters

    The available filters in SVG are:

    • feBlend
    • feColorMatrix
    • feComponentTransfer
    • feComposite
    • feConvolveMatrix
    • feDiffuseLighting
    • feDisplacementMap
    • feFlood
    • feGaussianBlur
    • feImage
    • feMerge
    • feMorphology
    • feOffset
    • feSpecularLighting
    • feTile
    • feTurbulence
    • feDistantLight
    • fePointLight
    • feSpotLight

    You can use multiple filters on each SVG element!

  11. Bookmarks

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •