Skip to main content
Chris P. Bacon
Chris P. Bacon
Inspiring
July 27, 2022
Question

Push changes in real time from the image curves to the SVG filter above

  • July 27, 2022
  • 1 reply
  • 210 views

I have the following SVG filter:

 

<svg class="yellow_black_blue" width="320" height="280" viewBox="0 0 320 280" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs class="levels_ui--svgDefs"><filter id="yellow_black_blue"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.4117647058823529 0.0392156862745098 0.9647058823529412"></feFuncR><feFuncG type="table" tableValues="0.7490196078431373 0.054901960784313725 0.8901960784313725"></feFuncG><feFuncB type="table" tableValues="0.6039215686274509 0.058823529411764705 0.5803921568627451"></feFuncB></feComponentTransfer></filter></defs>
</svg>

 

This is a multitone filter that I apply to high contrast black and white images.

The goal is to adjust the b/w image curves while the SVG filter is applied to it, be able to see the filter changes that are the result of the underlying curves changes, in real time.

So I open the image as linked in Illustrator, then choose "Edit Original" from the links panel, it opens in PS, I adjust the curves, save, refocus AI, click to apply the changes, to finally see the filter changes (the colors will get redistributed in the multitone filter).

The issue is that I need to see the changes in real time, without saving in PS, refocusing AI and click to apply changes.

Do SVG filters really require for the image to be saved after curves adjustment to recompute the filter results?

Or the changes can be emulated in real time, "optically", by applying the SVG filter as a layer?
Does anyone know a solution to instantly recompute and reapply the SVG filter as curves are changing, within the same app, without saving the image and changing apps?

Does anyone know if this PS plugin: svglayers.com can do what I want?

Thank you in advance.

This topic has been closed for replies.

1 reply

Mylenium
Mylenium
Legend
July 27, 2022

By their nature SVG filters only work in realtime in a web browser where the page gets redrawn a gigazillion times per second and the DOM objects can be modified in realtime. You can of course grease up your elbows and implement the necessary JavaScript in your SVG. That said, your whole workflow probably doesn't make a lot of sense outside perhaps previewing the filter for testing of a web site mockup. What you want to do could very likely entirely be achieved in Photoshop with a bunch of stacked smart filters, layer styles and/ or a custom LUT/ profile.

 

Mylenium

Chris P. Bacon
Chris P. BaconAuthor
Inspiring
July 27, 2022

Hi Mylenium, 

the multitone images created from black and white with my SVG filter need to be used both in print and on the web, so I started up with the SVG filters because that's much better for the web than mass PhotoShopping images because it allows me to easily change many images at once by changing the SVG filter code.

 

Probably using a multitone Photoshop effect instead of an SVG filter would allow me to see the color distribution in real time as I adjust the curves, is that correct?
That's fine for my print project, but to create the correct curve for each image with the filter on for the web, I would still need to be able to see the changes in the SVG filter real time in PhotoShop, when I adjust the curves.

Best I can ask is how to convert an SVG filter into a PS Effect (or smart filter / layer style / LUT), and how to export any PS effect / smart filter / layer style / LUT into an SVG filter?

I couldn't find any conversion methods by Googling - and it seems that you don't know a real time way of doing this either?

Thanks for telling me about smart filter / layer style / LUTs though. 

I only searched for "PS effect to SVG filter" or "SVG filter to PS effect". 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices