API Documentation¶

With this API I hope it is much easier to generate HTML for SVG. Please try it and give me feedback.

How to work with this API?¶

It would be good to work with an IDE like Netbeans or Eclipse. In this case you can use method autocomplete. You want to create a new grafical form? So begin typing "create" and autocomplete gives you a list like:

• createRect
• createCircle
• createEllipse
• ...

All allowed attributes for choosen grafic form can be set by an equal setter method. You want to set the horizontal position of a circle object (cx)? Use setCx([value]).

CSS or Style¶

CSS and Style is a little bit different. All Styles which are also allowed by CSS2 are contained in an own object called "CSS". All Styles which are only available for SVG are called "Style". So...if you want to set style "font" you will find it in CSS-Object. Object filling "fill" is not available for CSS2, so you find it in Style-Object

How to start¶

Create an instance of Tx_Sfsvgapi_Lib_Svgapi or use dependency injection if you're using extbase:

/**
 * inject Svgapi
 *
 * @param Tx_Sfsvgapi_Lib_Svgapi $svg
 * @return void
 */
public function injectSvgApi(Tx_Sfsvgapi_Lib_Svgapi $svg) {
    $this->svg = $svg;
}

Now you should set some default values for SVG like width and height:

$this->svg->setHeight(300);
$this->svg->setWidth(400);

Sample¶

// initialize SVG
$this->svg->setHeight(300);
$this->svg->setWidth(400);

$circle1 = $this->svg->createCircle()
    ->setCx(100)
    ->setCy(50)
    ->setR(20)
    ->setStyle()
        ->setFill('#FF0000')
        ->setOpacity('0.3')
        ->end()
    ->setCss()
        ->setVisibility('visible')
        ->end();
$this->svg->add($circle1);

$text = $this->svg->createText()
    ->setX(10)
    ->setY(40)
    ->setChild('Hello everybody')
    ->setCss()
        ->setFontFamily('Arial')
        ->setFontSize('12')
        ->end();
$this->svg->add($text);

// get svg code and assign it to a fluid var
$this->view->assign('svg', $this->svg->getSvg());

The methods setStyle() and setCss() are child objects of the current SVG-Object. So...if you use them they are returning their own object instead of the parent SVG-Object. That's why I have implemented an end()-Method which returns the parent SVG-Object again. Maybe you know such a solution from jQuery. There is also a end-Function to return to the parent object.

After finish editing a SVG you have to add your SVG-Object with help of add(). Else it will not be rendered/displayed.

getSvg() loops through all added SVGs and creates/returns the HTML-Code.

I hope you have fun with it.

Stefan