tutorials

The following videos demonstrate several features:

Open documents, Change the scale and orientation of a documents

This video shows how to open multiple SVG documents in svgreal and change their scale and orientation. It illustrates the various capabilities of the multiple document interface: tiling and stacking windows, resetting of the viewing transform, opening svg documents from the OpenClipArt RSS feed.

Highlight elements

This video demonstrates the dual display of svgreal SVG documents: the SVG dom tree is displayed on the left of the document, while the resulting SVG canvas is displayed on the right. Moving the mouse over either zone causes highlighting of the corresponding element in the adjacent zone. This makes it intuitive to understand the organization of SVG documents.

Inspect element properties

This video demonstrates svgreal’s inspector, a dialog which displays and provides edition capabilities for the properties of selected SVG elements. When no elements are selected, the inspector is also used to set the default values of CSS properties for new SVG elements.

Create basic shapes: lines, circles, ellipses, rects, polygons, polylines; create paths: move, line, quadratic and cubic segments

This video demonstrates how to create basic SVG shapes with svgreal: lines, circles, ellipses, polylines, polygons and paths. Paths may contain linear, quadratic and cubic segments and be discontinous.

Edit shape geometry

This video demonstrates how basic shapes can be edited with svgreal: shapes can either be edited directly with 2d manipulators or they can be edited with the inspector by changing numerical properties.

Edit path geometry

This video demonstrates how svgreal’s path editor work. Paths can either be edited directly with 2d manipulators or they can be edited with the inspector by changing numerical properties.

Edit CSS attributes

This video shows how to use the inspector to edit CSS properties of SVG elements in the svgreal online SVG editor. It also demonstrates the color editor dialog.

Edit transforms, Reorder elements

This video shows how to clone SVG elements with drag-and-drop in svgreal. It shows how to change the transform of an SVG element (scale, rotate, translate) using a 2D manipulator.

Drag-and-drop elements between documents

This video shows how to clone SVG elements with drag-and-drop and move svg elements between documents using the svgreal online SVG editor.

Open local SVG files, Export documents to SVG

This video shows how to import local SVG documents in the svgreal online SVG editor by drag-and-dropping files directly in the browser. It shows how to change the viewbox of a document and export a document back to SVG.