Tekplace
Create new account:
Connection failed Invalid password (minimum 6 characters) This email address is already used This user name is already used The confirmation email could not be sent Invalid email address Username not provided Unknown user name Wrong password
User name:
Password:
Create Account
Cancel
Ok
Confirm your account using the link in the email we just sent you! An email has been dispatched to you. Use the link it contains to conclude the deletion of your account! Connection problem! The name is already in use! The match is not available anymore!
OK
Do you really wish to delete your account and all related data? Do you really want to delete this rule set?
Yes
No
Name of the rule set:
Connection problem! The name is already in use!
OK
Cancel

Using SSVG on your website

First off, our Editor allows you to make use of SSVG graphics by downloading them as SVG or PNG. Those formats are understood by all major browsers. For example, include an SVG file by just pasting it into your HTML or by using a tag like <img src="myfile.svg">.

However, it would be much more convenient to use SSVG code directly by making the browser understand how to handle it. Here is how:

  • Download the file ssvg.min.js from the link above and add it to your HTML directory
  • Add the following tag to your HTML header:
    <script type="text/javascript" src="ssvg.min.js"></script>

Now, a global Javascript object named SSVG will be available on the page and can be used to add graphics, just through plain SSVG code. Here is a simple example:

HTML

<!DOCTYPE html>
<html>
    <header>
        <title>SSVG Example Page</title>
        <script type="text/javascript" src="ssvg.min.js"></script>
    </header>
    <body>
        <h1 style="text-align:center;font-size:36pt;margin:50px">
            SSVG Example Page
        </h1>
        <div data-ssvg="mygraphic" data-width="400" data-height="400"
            style="width:400px;margin:0 auto">
        </div>
        <script>
            SSVG.init("mycollection");
        </script>
    </body>
</html>
			

SSVG-collection file mycollection.json

{
    "mygraphic": "24,24!C100b!C482!a56[8(M5,12M12,1T72[5+g8t-72+g8t144]f)*R9,12,12]"
}
			

Note the collection-file is in JSON format. It defines a graphic named "mygraphic" by its SSVG-code. You should name this file "mycollection.json" and add it to the HTML directory. The file-name "mycollection" coincides with the one appearing in the HTML script tags: SSVG.init("mycollection"). And the graphic name "mygraphic" is the value of the div's data-ssvg attribute.

Here is what happens when the page loads: the command SSVG.init("mycollection") gets the JSON file up into the browser and looks for data-ssvg attributes on the page, where it generates the appropriate graphics (by attaching SVG to the nodes).

Another example

Besides generating graphics when the page loads, using an SSVG-collection, it is also possible to generate graphics dynamically at any time.

HTML

<!DOCTYPE html>
<html>
    <header>
        <title>SSVG Dynamic Example</title>
        <script type="text/javascript" src="ssvg.min.js"></script>
    </header>
    <body>
        <h1 style="text-align:center;font-size:36pt;margin:50px">
            SSVG Dynamic Example
        </h1>
		
        <div style="width:360px;margin: 40px auto">
            <label>No graphics on this page now, but ... </label>
            <button onclick="draw()">Press Me!</button>
        </div>
        <div id="container" style="width:60%;margin: 40px auto">
        </div>
        <script>
            function draw() {
                var code = "!C2M360,360+o240f!C1M360,480" 
                    + "+e120,120,90,-180m0,-240+e120,120,90,180" 
                    + "m0,120+e240,240,270,180m0,-120"
                    + "+o40m0,240+o40f!w20m0,-120+o240p";
                var dynamicSsvg = SSVG.compile(code);			
                SSVG.renderAt(document.getElementById('container'), dynamicSsvg);
            }
        </script>
    </body>
</html>
			

No collection file is necessary here (still, you have to have ssvg.min.js in the html directory). The reason is that we use SSVG code directly as a string in the inline script. How does it work?

The SSVG object gives access to two more functions: SSVG.compile and SSVG.renderAt. The first one takes a string coding a graphic and generates a Javascript object from it. The second one takes a document node (here: the div with id "container") and the object generated by SSVG.compile and generates the graphic (as SVG) below that node.

Notice the following:

  • We did not need any data-ssvg attribute, as we tell SSVG.renderAt directly where to put the graphic.
  • In this example, we have not added data-width or data-height to the div. The result is that the graphic will get the size of the div (here 60% of the page width). You can see that the graphic changes size when you resize the browser window (compare this to the previous example!).
  • If you use JQuery, you can replace document.getElementById('container') with $('#container')[0].


Note: the file ssvg.min.js available from the above download link is distributed under the MIT license. It can be freely used in your own projects.