SVG Filter Effects

While most of the KDE developers enjoyed the sun and the ocean at the GCDS, KOffice people are working hard as always. :-) Some monthes ago Cyrille our restless Krita hacker and KOffice release manager posted a patch on reviewboard which implemented a proof of concept for filter effects in flake. Unfortunately it didn’t found the attention it deserved and such got forgotten a little (I blame myself as part of this).
Luckily Cyrille added filter effects support to the feature plan of the upcoming KOffice 2.1 release, so I stumbled upon it again and decided to do something about it. So some days ago we had a nice IRC discussion about how we would tackle the problem and how we would go about implementing it in the flake library. The decision was to have filter effects as plugins which get loaded when a shape with effects gets loaded from a file or a to be written tool for editing effects is activated.
As you might have already guessed from my boring introductory text, we’ve got a first version of a filter effects plugin working. The filter effect that was choosen to be implemented is the blur effect, because it is possible the effect most used by artists.
First step was to produce a simple svg document with a blurred shape (used Inkscape for this) and to implement the stuff needed to load the filter effect and attach is to a flake shape. The seocnd step was to actually implement the filter itself and the painting of the filtered shape. The third step was to implement a tool which can add a filter effect to a shape, remove a filter effect from a shape and as well as change properties of a filter effect attached to a shape.
A filter effect plugin does provide a corresponding configuration widget which is shown inside the tools docker widget and can be used to edit the filter effect properties (see bottom right of the screenshot below). Thus the filter effects tool only has to know about the common properties of the filter effects, the custom properies are all handled via the plugin provided configuration widget.
As a reward for those reading all the way down to this paragraph I show you an actual screenshot of Karbon with blurred shapes.

karbon-blur-effect

What is missing still is the code to save filter effects back to svg. Also polishing of the filter effects code is still to be done. But at least it is a nice start which already produces some nice results.

About these ads

Tags: , ,

37 Responses to “SVG Filter Effects”

  1. Chris Says:

    Wow, I think soon I can replace Inkscape. You’re doing a great job! Thanks!

  2. jaham Says:

    @Chris Thanks for your kind words. Lots of stuff still missing but we are working on it. :-)

  3. Micha Says:

    I agree, Karbon looks very promising. Especially I like the GUI far better than inkscapes one, I guess, I have to try with it a little bit more ;)

  4. Elvis Stansvik Says:

    Great of you to pick up the ball and do the work on this Jan!

  5. pns Says:

    I hope at the end of the feature completion, we can have downloadable effects through KHNS which are collection of filters grouped with parameters defined in a xml/script format. That would be useful for amateur guys like me to download effects made by the best :) .
    Also, I hope this will be somehow combined with Krita effects so that effects need not be done multiple times. Digikam has effects too. There are duplications of effect implementations at multiple places :( .

    • jaham Says:

      Now that is a great idea. I am not sure it will get implemented in KOffice 2.1 (makes more sense once more effects are implemented) but it really sounds like a great feature. On the duplication of effort, the filters the post is mostly about are filter effects as specified by svg, that means to keep it compatible with e.g. inkscape, we are bound to combination of those. But sharing them would be really easy, as they can be saved/exchanged as svg fragments.

      • pns Says:

        I just hope it will be implemented during initial architecture itself. I remember Digikam people tried to implement grouping from groundup because making it on top of existing was difficult. They now have ability to change the parameters of individual filters on the fly. Just wanted to share something I read in kdeplanet before :)

        • jaham Says:

          Well the grouping of the effect primitives is specified in the svg specification. Is basically defines a filter consisting of filter primitives which define their parameters as well as their inputs and outputs.
          A dropshadow filter would look like that:

          <filter>
            <feBlur stdDeviation="10" in="SourceAlpha" result="blur"/>
            <feOffset dx="20" dy="30" in="blur" result="offset"/>
            <feMerge>
              <feMergeNode in="offset"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
          
    • slangkamp Says:

      Using Krita effects for this isn’t feasible here. Krita uses a completely different data structure, which would be overkill here. The apps have very different usecases that make sharing filters difficult.

  6. Troy Unrau Says:

    Great work :) I love it when the KOffice folks post neat things :)

  7. Bugsbane Says:

    I’m so ready to jump from Inkscape to Karbon, just as soon as the 3-4 basic features I regularly use in Inkscape are there. Blur was one of them. A “drag the curve anywhere to modify it” tool was another, that sounds like it’s already been patched.

    I’m so very ready to evolve past my last Gnome apps (Inkscape, Gimp, FF and OOo) behind. Koffice + Rekonq / Arora up to speed and I’ll be there. (Love to our Gran Canaria Gnome brothers… I just want my desktop fully integrated!)

    Any help you can use from a non-coder artist, just let me know! :D

    • jaham Says:

      I’d love to hear what the other basic missing features are.

      • Blendiac Says:

        Sure,

        1. *** Fast switch between pan and edit with middle mouse button. Simple but vital. Something like middle mouse button to quickly pan around the image, only until you release middle mouse button. This is how both Gimp and Inkscape works and it makes working super fast if you don’t need to take your jand off the mouse or keep clicking to go back to the edit tool you were on before. I do a lot of “Move. Small edit. Move. Small edit. Move. Small edit.” Having to keep pushing space and then click on my edit tool then push space makes this very slow. Much better is move with MMB. Edit with LMB. Move with MMB. etc. Photoshop works in this way too, but using space instead of MMB. It’s still good, but not as good as being able to do everything with only one hand on the mouse. So to wrap up: MMB switches to pan *and* switches back to the previous tool when released.

        2. Clipping / masking. The intersect path tools get close-ish. If I want to use 1 shape as a mask for another I can choose both and do “Intersect path”. What happens when I want to edit just shape 1 so it reveals more of shape 2 though? There doesn’t seem an equivalent of set / release mask in Inkscape.

        3. Select under. Often you don’t want to select the shape that happens to be on top. Inkscape has you hold Alt and click to cycle through selecting objects underneath. Obviously this doesn’t play well with Kwin which uses alt to drag a window. Maybe something like ctrl+shift would work (if it’s not used already.)

        BONUS ITEMS:
        Ok, these are the items I *wish* were in Inkscape but dev’s don’t seem to want, so these aren’t really “I miss these from Inkscape” because they aren’t there.

        1. *** Ability to edit path widths on a per node basis (and have the width interpolated between the nodes). Look at any hand drawing / cartoon. Drawings *constantly* change the width of lines. Not being able to thicken and taper lines is crazy. Having to manually move and edit a gazillion nodes just to change a lines width along a curve is crazy. This concept seems to be ad odds with many programmers concept of a line as being a pure mathematical algorithm rather than a line drawn by a hand using various angles / pressures. Please. Please. Please. I’ve been desperate for this for years.

        2. Ability to export to different bitmap formats. I still don’t get why Inkscape refuses to support exporting to Jpeg ( /PGF / TIFF / GIF / Anything but PNG). I love PNG, but it’s a pain to constantly have to export, then open in another app and save as a jpg.

        MINOR USABILITY:
        1. Import graphic looks like you can’t import a raster image… Yet if you click on add shape -> image you can do just that. Why not put image formats in the “Import graphic” dialogue, and if it’s raster, do the exact same thing that insert shape -> image does now?

        2. Would be nice to have the toolbars as docks too, so we can mix other docks in the same positions. I keep wanting to put the add shape dock next to the file / edit toolbars. I can put it under, but it wastes a lot of space.

        *phew* Well you asked! I really should put all these in wishlist items at bugs.kde.org. Let me know if this would be worth enough to you to warrant doing.

        Cheers

        • jaham Says:

          First thanks for your feedback, very much appreciated.
          Now to the points listed:

          1. fast tool switch:
          This makes sense. I have to see if the middle mouse button is not used that much already, otherwise we would have a problem.

          2. Clipping/Masking
          This particular feature is not yet implemented in Karbon/KOffice. Hopefully will come in the near future.

          3. Select under
          Is already implemented, use Shift + Click to select next shape behind the currently selected shape.

          Bonus items:

          1: Dynamic line width:
          Well that is heavy, as none of the rendering engines do have support for this. And it is not something you can easily save to SVG/ODF, so that is probably the reason the Inkscape guys don’t like this. This will not work with a normal path shape. But I can imagine having a special shape which then would emulate the dynamic line width with fill, similar to the calligraphy tool/shape.

          2. Export to different image formats:
          I think this should already work. Karbon can export to PNG, from there krita export filters should be able to “kick” in and convert to different bitmap formats.

          Usability issues:

          1. Import raster image just like import graphics
          Yeah this seems like a good idea.

          2. Toolbars as docks.
          I don’t think this is possible.

          And yes filing these as bugs/wishes is certainly a good idea, so I can find them all in one place.

          • Bugsbane Says:

            Thanks for the reply,

            I’ve gone and filed bugs with some more detailed descriptions and occasionally ideas how these could be implemented. I also looked and, yes indeed, Karbon *does* save to different file formats! Don’t know how I missed this (probably just so used to the fact that Inkscape *doesn’t*!) Nice work!

            Shift+click seems to work well, too… sometimes. If you click too fast it seems to change into edit path mode. Maybe the time for two clicks to change to edit mode could be reduced, or this could be ignored when shift+clicking. It also seems to not work if you already have a large object selected behind the object you’re clicking on.

            Anyway, using Karbon more, I’m really impressed with how its coming. Already I see a couple of things that I wish were in Inkscape (single curve calligraphy editing, multi format file export, a real layer view with individual objects!)

            I just wish I could magic up some trained packaging monkeys so I could give you feedback on the dev version of 2.1! Anyway, thanks again for working on this. Karbon is one of the projects I’m really looking forward to using once some of the current patches make their way down the line. It’s looking fabulous! :)

            • jaham Says:

              Thanks for your effort.

              Shift+Click: Clicking to fast might result in a double click, which will activate the “native” tool for the clicked shape.

              And thanks for your kind words, your feedback is also a valuable contribution. Keeps my motivation up. :-)

              • Bugsbane Says:

                Thanks for the code!

                Seeing interesting new art tools appear on my machine keeps my motivation to create artwork up!

                Let me know if there’s any way I can help further. For my part, I’ll just say that it’s great getting to hear about what’s actually happening “behind the scenes”. Commit logs usually look like another language that I don’t understand, so blog posts like this are like gold. :)

                • Bugsbane Says:

                  Hmmm… better stop talking soon… we’re running out of horizontal space!
                  =:-O

  8. zayed Says:

    Great, I like these type of posts.

    Keep it up guys. You are the best.

  9. Rsh Says:

    I strongly keep the thumbs up the for Karbon as a replacement of Inkscape – not that I find Inkscape itself in any way bad – it’s a superb tool – I just don’t really like the entire GTK+ experience.

    What I would like to see in Karbon:
    -PDF loading and PDF saving capability. (probably it’s cairo’s job in Inkscape)
    -Path modifications with keyboard – really only way to do really precise adjustments – especially on laptop.
    -And the mentioned filters! :)
    Probably there would be more things if I started using Karbon more extensively …

    • jaham Says:

      PDF loading is on my TODO for a long time already. I already have a half working pdf import filter (which is disabled atm) using poppler. Hopefully I have some time to improve it some more so that i can enable it for KOffice 2.1.
      I am not sure what you mean with path modifications with the keyboard. Can you explain that? Best would be to file a wish on bugs.kde.org, which is a better place for feature requests.
      But as always, there is so little time and so much to do. :-)

      • Rsh Says:

        Oh, what I mean in an ability to mark individual indices or groups of indices and then move them precisely by keyboard – each key stroke moves by a defined number of units. Alt+keypress would make the movement shorter, and shift + keypress would make it farther. Currently it sort of works this way with objects – but as I see it’s only two distance modes (without the really precise one)
        It may be though that I somehow missed this feature and there’s a way to activate it even now – if so, then I apologize.
        Thank you very much for your attention. :-)

        • jaham Says:

          Ah ok. I think you are right, it is not implemented for moving selected points around with the keyboard. This is something that can be implemented easily though.

        • koffice Says:

          Ah, alt was missing there indeed. Added for shape moving.

        • Rsh Says:

          I opened some of my svg files and now I notice that the patterns from Inkscape are not working, is it Inkscape specific feature?

  10. Thomas Zander (thomaszander) 's status on Monday, 13-Jul-09 13:28:46 UTC - Identi.ca Says:

    [...] SVG Filter Effects « The unnamed blog [...]

  11. Daskreech Says:

    Hope you were not implying that GCDS wasn’t stimulating work on KDE :) Though yes working with Sun and ocean is always nicer :) Also LOL at being ready to drop Inkscape. Looks like Blur really is that important :) Don’t forget to blog when the tut on how to make filter effects gets put up.

    • jaham Says:

      Well sometime one has to fool himself, reading all the nice blogs about GCDS. On dropping Inkscape, yeah seems the blur effect is a switcher.
      When speaking about a tutorial, do you mean one on for a developer to implement a filter effect, or more for the user on how to use filter effects?

  12. Dread Knight Says:

    Really awesome. What fucking annoys me about karbon14 and krita is the ‘tool bar’…. Please make the icons bigger and arrange them in a vertical manner like in inkscape. Krita has a ton of shit in the toolbar… “make star” ? WTF?

    Keep up the good work. Hope this will have binaries for windows and macosx as well soon.

    • jospoortvliet Says:

      icons are arranged like they are for good reason – there is plenty of horizontal space on modern monitors (esp since the majority is wide screen these days), not much vertical. So most of the stuff will be in the dockers on the sides of the screen. Now this is KDE so you can move these dockers, and arrange them horizontally if you want, it just won’t be default.

      BTW there are KOffice 2.0.1 packages for windows (see windows.kde.org) not sure about mac.

    • Blendiac Says:

      Like in Inkscape?

      Inkscape’s main toolbar *is* vertical, same as Karbon14 / Krita. Only the menu, tool options and a couple of other bits and pieces are displayed horizontally…

  13. Blendiac Says:

    For anyone who would like to actually try all these cool new features the Koffice team have been pumping out, I’d suggest taking a look at this item on KDE Brainstorm at:
    http://forum.kde.org/viewtopic.php?f=83&t=62514

  14. jozef Says:

    hi everyone!
    I’m working on a jquery plugin that will make easy to use svg/vml text effects on html text.I would appreciate giving me ideas what kind of effects would be verry usefull for you people.Yet I have stroke, opacity,gradient,blur,skew,rotate. I was thinking even of combinations of some effects to come up with a great new effect.thanks.

    • Bugsbane Says:

      Not sure what kind of effects we can ask for, but here are a few things that would be awesome! :)

      * What about offset / linked offset (see Inkscape). This grows a new shape x pixels outside/inside the selected shape.

      * More complicated but very cool would be an effect that filled with a gradient that matched the shape. For example, if I had an “S” shape, linear gradients don’t follow the curve of the “S”. This usually has to be done manually by creating a smaller S inside (using offset above) and then blurring it. This doesn’t exist in Inkscape yet, but is much needed.

      * Something like Inkscapes new spiro paths would be cool (thicker in the middle, to thin at the end).

      Naturally, I’ve asked for the hardest stuff first. You *did* tell us to ask! ;)

  15. Bill Bartmann Says:

    Cool site, love the info.

    • freedomsoftware Says:

      Hmmm… This comment is completely generic and the name links to an ad for “a system for making a billion dollars”.

      I think you, “Bill”, are a spambot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: