1. Requirements
2. Usage
3. Resources

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