T 001 Filtering
Lazur
„...A filter effect consists of a series of graphics operations that are applied to a given source graphic to produce a modified graphical result. The result of the filter effect is rendered to the target device instead of the original source graphic. ...” -as written in the svg standard. Design-wise it means endless possibilities to alter the graphical appearance of parts of our images. Some important points come from that describing: · they require a graphical element to start with · they rely great on the renderer, and the rendering capabilities of the target device · filters are procedural. You can select any object in your document and add a filter to it. In svg that means every graphical element that can be selected in the xml tree can be filtered -the brave ones can add a filter to a layer (group) in inkscape, save it as a default template and prank other users by a totally unexpected behave…
Comment here...
T 004 Built In Filters
Lazur
For adding a filter to a selected object, the most straightforward way is going by the filters menu on top. That is containing quite a lot of filters built in to choose from. However, due to its regular menu item limitations, it's not a very helpful for choosing. There is no visual indication built in of the filters affecting a preview object's appearance, nor there is an option to go through all like when previewing a font and styling on a text object. It's all pure luck to find a suiting filter by first pick. Either it takes applying the filters one after another on the object selected and undoing every time the outcome is not right, or having a sneak peek on a guide image where all the filters are displayed in action. The current (not yet up to date) manual is taking 19 pages to showcase them all. If inkscape was installed with the example files, check the filters.svg located in inkscape/share/examples to see an all-in-one action shot.
Comment here...
T 011 Filter Editor
Lazur
The ”Filter General Settings” has four spinboxes where you can type in values. The ”Coordinates” row sets the (x,y) position of the top left corner of the filtered area relative to the object's original bounding box, while the ”Dimensions” row sets the width and height, relative to the original bounding box. That is a fairly important part as effects that go over the original boundaries may gat chopped off at a filtered area set too small. If the effect is used to generate a texture to the object, the default values are usually fine. Those invoke the filtered area 1,2 (or 120%) times larger than the original, centered to the object.
Comment here...
T 009 Filter Editor
Lazur
For the very first filter, let's try out the flood fill, by selecting it from the list. Click the add effect button right after. ”The feFlood filter primitive fills the region with a given color and opacity. It is usually used as an input to other filters to apply color to a graphic.” That equals as a base for bucket filling, with the difference you have to define the filled region's boundaries.
Comment here...
T 006 Filter Editor
Lazur
When creating a custom filter from scratch most part of the filter editor is greyed out, only the ”New” button is active. It is placed at the bottom of a column which starts with filter and #. This section of the panel enlists all the filter definitions embedded into the document. Similar in nature to gradients or custom markers, dasharrays etc. If a built-in filter was applied, it will show up here. Using gaussian blurs by the fill&stroke panel's slider and different blending modes are supposed to appear right after they are created here as well. However there seems to be some regression compared to 0.48 on this behave (on 0.92). Filter defs are listed in their creating order. You can rename, delete and duplicate them, however drag&drop is not working for reorganising.
Comment here...
T 010 Filter Editor
Lazur
Once added the effect parameters appear at the bottom, and the filter chain structure at the top. By default the flood fill is set to solid black. Remember it won't take action unless you tick in the checkbox at the filter list on the left! After applied, a black rectangle should be rendered. It is slightly larger than the object's previous bounding box. For reference, go to the ”Filter General Settings” tab.
Comment here...
T 005 Built In Filters
Lazur
Let's head to the filter editor.* As of 0.92.1, the interface is being in development, meaning part of this guide will be outdated shortly. Therefore focusing on structural concepts more, in the hope to push through a few ideas. If the faucet with the previous Eroded Metal filter is selected and the filter editor is opened, you can see -or at least, supposed to see- the structural elements that are chained up, resulting the affected look on screen. The core of the editor is node-based, albeit it doesn't stick out at first glance. It's hard to track such a filter's structure like the Eroded Metal, which is the main reason for the need of a facelift. Some general notes: · it is more useful to have this panel undocked and · there is no preview inside of any kind. Every time you tweak a filter's settings, you have to keep an eye on the main window too. *There is no default key shortcut set for it; it's available from the Filters menu on top.
Comment here...
T 003 Built In Filters
Lazur
When working with inkscape, keep an eye on the bottom indication line. Selecting an object on screen, it shows if there is a filter added. This case, the selected object depicting a faucet is a group, and it has a filter added which is named ”rusty”. Note how the selection box is not touching the edges of the visual boundaries of the object. That is due to by default visual bounding box is set. Certainly it doesn't make sense at this point, so better rephrase that as if not geometric bounding box is set, something interferes with the visual cue when filters are involved. It also often helps to understand a document's structure to switch rendering modes. With no filters rendering mode usually the filtered objects are sticking out. To toggle between rendering modes, press Ctrl+5 on the numpad.
Comment here...
T 007 Filter Editor
Lazur
If you click ”New”, a box appears before the filter's name and a number after it, below the #. The latter number shows how many objects have that filter applied. The checkbox is where you can switch on and off a filter for a selected object. Some important notes: · a filter definition can be empty, meaning if you apply it to your selected object it will be rendered invisible -as shown in the example. · you cannot add more than one filter to the same object. That is a real bummer, you cannot stitch two filters together with the editor at the moment. Only workaround is to group the filtered object, so then you can add another filter to the group. (And with groups there comes the possibility of messing up transformations.)
Comment here...
T 012 Filter Editor
Lazur
Going back to the Flood effect's settings there are two options to alter the output. A slider can set the opacity of the colour between fully transparent and opaque, representing it with a value between 0 and 1. Clicking on the Flood Color it brings up a color picker panel, with multiple inputs. Hex color names and RGB values are of the same as in the fill and stroke panel, however the HSL wheel is not 0-255 based: hue has a 0-360 scale, while the saturation and lightness can be set between 0-100 values. An important feature is that there is also a dropper tool included with the panel which can take any part of the screen as a reference. Let's change the default black to red.
Comment here...
T 008 Filter Editor
Lazur
Once you made the filter definition, you can edit it without it being applied to any object. Note that the vacuum defs/cleanup document options remove any unused filters. The ”Add Effect” button can add in the filter primitive which will alter the filtered object's appearance. The dropdown list contains all the primitives in alphabetical order.
Comment here...
T 002 Filtering
Lazur
Different renderers may differ by how they implement the process described in the filter being used. You may not get the exact same look through a browser as with inkscape, and the rendering may take too much resources for an svg to load. Unfortunately, pdf format doesn't support filtering, so if you want to share or print your images, rasterizing the filtered objects is the only way for preserving the appearance. Besides these, due to the procedural nature, rendering the image can be done at any resolution. That means you are not bounded to a certain image size unlike with a raster image editor. Everything is (supposed to be) rendered live, on the fly. This advantage has its price on the rendering time and resources used. Using complex filtering can result in a crawling machine.
Comment here...
T 013 Swiss Flag
Lazur
The most important part of filter editing is connecting the effects into a chain that defines the rendering process. With only a Flood added it's listed at the top row. The current editor lists the filter primitives added one after another. The bottom line of that list will be rendered on screen. Note that just by adding new filter primitives to the list, they won't necessarily create a chain from top to bottom. You need to connect them in a meaningful order.
Comment here...