50 lines
5.9 KiB
Plaintext
50 lines
5.9 KiB
Plaintext
SVG-edit 2.4
|
|
------------
|
|
|
|
Hi, this is Jeff Schiller and this is part one of two videos in which I'll be describing the new features in the latest release of SVG-edit 2.4.
|
|
|
|
First, some background: SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
|
|
|
|
So Version 2.4, code-named Arbelos, is a significant improvement over the previous release: SVG-edit has now evolved from a proof-of-concept demo into a full-featured application.
|
|
|
|
In this video I'll talk about the new path tool and the concept of zooming, I'll also cover some of the improvements to the user interface.
|
|
|
|
First up is the new path tool. In SVG-edit 2.3, the user had the ability to create a connected series of line segments and polygons [Draw a polyline]. In 2.4, the Poly Tool has evolved into a general purpose Path tool that draw straight lines or curves. To change a line segment into a curve, double-click on the starting point of that segment. Users can also manipulate the look of the curve by moving control points. Curves can be configured to be symmetrical by a push-button in the context panel. As you can see, when I change the position of a control point, the opposite control point also moves. The user also has the ability to add/delete segments to an existing path element. One final note on paths: most graphical elements (rectangles, ellipses, etc) can now be converted into paths for finer editing. This conversion is a one-way process, though it can be undone.
|
|
|
|
So next I'm going to talk about zooming. In 2.4, it is now possible to zoom in and out of a graphic. Zooming can be achieved in a variety of ways: Using the zoom control at the bottom left, you can type in a zoom percentage, use the spinner or pick a zoom level from the popup. Also included in the popup are things like "Fit to selection", which can be quite handy. Zooming is also possible via the Zoom tool on the left. Select it, then drag the area you wish to zoom in on. A final option is to just use the mousewheel to zoom the canvas quickly around the mouse pointer.
|
|
|
|
From a usability perspective, we've created a Document Properties dialog, available by clicking on the button in the top panel. This dialog box serves as housing for image and editor properties that are seldom accessed, but still important.
|
|
|
|
In terms of image properties:
|
|
|
|
* Give the image a title
|
|
* Change the canvas size, or pick one of several options
|
|
(* You can choose to have all local raster images referenced via URL or embedded inline as a data: URL. This will make your SVG image larger, but self-contained and thus, more portable.)
|
|
|
|
In terms of editor properties:
|
|
|
|
* SVG-edit's entire user interface (tooltips, labels) is fully localizable, and SVG-edit has now been translated into 8 languages. If you would like to contribute translation for a language, please contact us on the mailing list.
|
|
* Another nice feature is the ability to set the icon size of the editor, which can help with adapting SVG-edit to different environments (mobile devices, smaller netbooks, widescreen displays).
|
|
(* One final editor preference that can be changed is the canvas' colour. For most situations, a white canvas might be fine for creating your graphic, but if you are trying to draw an image with a lot of white in it, you might find this option useful.)
|
|
|
|
So that's it for this video. In the next video I'll talk about grouping, layers and a few other features of SVG-edit 2.4.
|
|
|
|
|
|
--------------------
|
|
|
|
Hi, this is Jeff Schiller and this is the second of two videos describing the new features in the latest release of SVG-edit 2.4, code-named Arbelos.
|
|
|
|
If you missed the first video, SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
|
|
|
|
In the first video I gave an overview of the Path tool, Zooming and the new Document Properties dialog. In this video I'll talk about grouping, layers and a couple other features that round out the release.
|
|
|
|
So first is grouping. In SVG-edit 2.3 one could draw graphical primitives such as ellipses, rectangles, lines and polygons - and those elements could be moved, resized, and rotated. In 2.4 we've added the ability to arrange any number of elements together into a group. Groups behave just like other element types: they can be moved, resized and rotated - and they can be added to larger groups to create even more complex objects. You can copy/delete groups just like any other element. Ungrouping a group allows you to manipulate the elements individually again.
|
|
|
|
The next thing I'll talk about is Layers. The Layers panel lies tucked to the side but can be clicked or dragged open at any time. Layers work very much like they do in other drawing programs: you can create new layers, rename them, change the order and delete them. Elements not on the current layer are not selectable, so it's an excellent way to separate elements in your drawing so that you can work on them without interfering with other parts of the drawing. If you want to move elements between layers, select them, then select the layer you want to move them to.
|
|
|
|
There are a couple of other minor features that round out SVG-edit 2.4:
|
|
* It is now possible to embed raster images (via URL) into the canvas using the Image tool on the left
|
|
* It is also possible to keep the ratio of any element fixed when resizing by holding down the shift key.
|
|
* Finally, if the canvas is starting to become obscured, you can turn on 'wireframe mode' which shows the outline of all shapes in your drawing, but none of the fill or stroke properties.
|
|
|
|
There are several minor features that I didn't have time to talk about, but feel free to browse to the project page and try out the demo. Thanks for your time. |