yiisvgeditor

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

v0.1

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...

Requirements

Yii 1.1 or above

Usage

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

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

'components'=>array(
        // SVG extension
        'SVGEdit'=>array(
            'class'=>'application.extensions.SVGEdit.SVGEdit',
        ),
        //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()
    {
        $this->layout="none";
        $this->render('editor');
    }
 
    //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()
    {
        $this->layout='none';
        $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)

$this->widget('application.extensions.SVGEdit.SVGEdit',array(
                    'name'=>'Yii-SVG',
                    'options'=>array(
                        'dimensions'=>array(320,240),
                'canvas_expansion'=>1,
 
                    ),
                ));

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!

Resources

  • [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