Wrapper extension for the SVG-Edit plugin - allows basic SVG editing in your web application


A wrapper for SVG-Edit (see http://code.google.com/p/svg-edit/) - real time SVG design within your application, with the ability to export as png or save as a plain SVG file. This extension is in beta stage currently and may be riddled with bugs - so I advise that you use at your own discretion...


Yii 1.1 or above


Extract the folder to your /protected/extensions/ directory.

Add the following to your components in /protected/config/main.php:

        // SVG extension
        //This is an extension to CClientScript, it changes the order in which scripts and scriptFiles are loaded to allow the plugin to work correctly
        'clientScript' => array(
      'class' => 'application.extensions.SVGEdit.ClientScript'

In your SiteController.php add the following functions:

//Renders the view file in which you will place your editor widget - optional
    public function actionEditor()
    //Handles the local images for the Image Library (where Yii::app()->params['dirImages']/Yii::app()->params['urlImages'] are defined in your config/main.php or config/params.php)
    public function actionSVGImages()
        $imageDir = Yii::app()->params['dirImages'];
        $imageLocation = Yii::app()->params['urlImages'];
        //Looks in the above directory and fishes out all the files (make sure it only contains images)
        foreach(glob($imageDir.'*') as $filename){
        $images[] =  basename($filename);
        $this->render('application.extensions.SVGEdit.assets.extensions.imagelib.index', array('images'=>$images, 'imageLocation'=>$imageLocation));

To use the widget, place the following code in your view (note, it will use up a full screen so it's best to either open it in a popup or set $this->layout="none"; before rendering - my next version should include the ability to shrink the editor (currently the only available method is to wrap it in an iFrame)


More options can be found at http://code.google.com/p/svg-edit/wiki/ConfigOptions Currently you can only export as .png or .svg - you will need to edit the source code to allow database saving etc.

Updates to follow!


  • [Project page] http://code.google.com/p/svg-edit/
  • [Try out a demo] http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html

Be the first person to leave a comment

Please to leave your comment.

Create extension