Extern am CSS and Custom variables

[mra-miratech]

Im new to batik and curious if it upports svgs which use CSS Styling via CSS selectors and allows custom properties (CSS variables). E.g
—critical-col: red;
.critical {stroke: var(—critical-col)}
<line class=“critical” …..>

ideally, even with reference from svg to external Stylesheets. And with a possibility to set the values of the custom cSS variables from Java Code?
is there such a a functionality?
And if so: is it part of the base batik or of this fork?

Thanks for your support !

[carlosame]

Im new to batik and curious if it upports svgs which use CSS Styling via CSS selectors and allows custom properties (CSS variables). E.g —critical-col: red; .critical {stroke: var(—critical-col)} <line class=“critical” …..>

ideally, even with reference from svg to external Stylesheets. And with a possibility to set the values of the custom cSS variables from Java Code? is there such a a functionality? And if so: is it part of the base batik or of this fork?

Hi, for questions about Batik please reach the Apache Batik project, however your question was already answered by the information in the EchoSVG Wiki:

https://github.com/css4j/echosvg/wiki

I'd suggest checking there before posting questions.

About this:

a possibility to set the values of the custom cSS variables from Java Code

I'd suggest checking css4j which allows programmatically setting CSS properties (including custom properties). You can modify the document the way you want, then feed it to EchoSVG.

[mra-miratech]

Hello carlosame, Thanks for your reply. I’m working as a consultant for a large company, and we just came across the problem that their software uses Batik but does not support ‘dynamic’ svgs. Your answer was indeed very helpful already. Would you please help me with additional questions? It seems echosvg could be a solution, but the documentation on batik which is the basis is not very good. One more question is how transitions / animations would be handled. The transitions are time based, so how would our Java code ‘know’ when to ‘re-transcode’ the document? Are there callbacks after the initial encoding if something needs to change? Or does the java application have to keep track on changes and then initiate re-transcode, providing a some sort of “time-stamp”? We have the following 2 types of “time based dynamics” in CSS: .sensorBody.fault{ animation-name: blink; animation-duration: 2s; animation-direction: normal; animation-iteration-count: infinite; } And #sensorProbe:not(:hover) .probeHandle{ opacity: 0; transition: opacity 0.8s ease-in-out; /*avoid sudden changes to the opacity. Instead, create a smoot transition.*/ } Will they be supported? Regards, Michael Von meinem iPhone gesendet Am 28.08.2022 um 09:48 schrieb carlosame ***@***.***>:  Im new to batik and curious if it upports svgs which use CSS Styling via CSS selectors and allows custom properties (CSS variables). E.g —critical-col: red; .critical {stroke: var(—critical-col)} <line class=“critical” …..> ideally, even with reference from svg to external Stylesheets. And with a possibility to set the values of the custom cSS variables from Java Code? is there such a a functionality? And if so: is it part of the base batik or of this fork? Hi, for questions about Batik please reach the Apache Batik project, however your question was already answered by the information in the EchoSVG Wiki: https://github.com/css4j/echosvg/wiki I'd suggest checking there before posting questions. About this: a possibility to set the values of the custom cSS variables from Java Code I'd suggest checking css4j <https://css4j.github.io/> which allows programmatically setting CSS properties (including custom properties). You can modify the document the way you want, then feed it to EchoSVG. — Reply to this email directly, view it on GitHub <#61 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUVD4AZ2KXV577OH5LBYDADV3MKVFANCNFSM572CAKDQ> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AUVD4A6A35VRPEGMYE6TS7LV3MKVFA5CNFSM572CAKD2YY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAA2USAA.gif> Message ID: ***@***.***>

[carlosame]

Hi Michael,

Both Batik and EchoSVG support SVG 1.1 animations (SVG, not CSS) with elements like animateColor. If you are interested about enabling SVG animations, I'd suggest checking the bridge.SVGAnimationEngine class.

Only CSS2 is supported in Batik. In addition to that, EchoSVG natively supports level 4 selectors and RGBA colours, but nothing about CSS animation properties. And BTW the transcoding helper (which supports recent CSS) only works for transcoding, it is not a browser-like solution. Yes it can decompose the animation shorthand into animation-name, animation-duration and friends, because css4j does that, but won't use them at all.

In theory, it should be possible for an application to establish their own timers and then repeat the transcoding several times as needed, but it would not be very efficient.

Will they be supported?

Nobody is being paid to work on EchoSVG, and implementing CSS animations would be a large project, so I doubt that neither Batik nor EchoSVG are ever going to support that.

When it comes to implementing web standards, keep in mind that the major browsers have budgets well into the nine-figures realm (look at the Mozilla budget, and they still struggle to keep up with their browser). Batik itself was written by an international team of developers, most or all of them being paid for that.

It would be nice if this project had lots of full-time developers and resources, but that is not the case.

Carlos

[mra-miratech]

Carlos, Thanks so much for your continued support. We may be able to work around these, by just eliminating it from the SVG. What we need to support however is transformation, specifically * transform:-rotate(var(--angle)) * transform: translate(var(--x-origin), var (--y-origin)) Will that work? And the probably most important question: I have difficulties finding the environment description for echo-svg. The clients environment is fixed to: * Java 8 (no chance to be updated to 11 or 17 in the foreseeable future). * Build using gradle 4.0.2 (slight chance to be updated to gradle 5 in future) Do you think we can get the echo-svg to run when clients use these technologies?

…

-Michael Rader- Steinenäcker 8 72631 Aichtal Tel: +49 7127 977-5827 Mobil: +49 179 4212 911 Mail: ***@***.***> ***@***.*** UStId: DE341937670 Diese E-Mail enthält vertrauliche und/oder rechtlich geschützte Informationen. Wenn Sie nicht der richtige Adressat sind oder diese E-Mail irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Mail. Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Mail ist nicht gestattet. This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden. Von: carlosame ***@***.***> Gesendet: Freitag, 2. September 2022 20:08 An: css4j/echosvg ***@***.***> Cc: mra-miratech ***@***.***>; Author ***@***.***> Betreff: Re: [css4j/echosvg] Extern am CSS and Custom variables (Discussion #61) Hi Michael, Both Batik and EchoSVG support SVG 1.1 animations (SVG, not CSS) with elements like animateColor. If you are interested about enabling SVG animations, I'd suggest checking the bridge.SVGAnimationEngine class. Only CSS2 is supported in Batik. In addition to that, EchoSVG natively supports level 4 selectors and RGBA colours, but nothing about CSS animation properties. And BTW the transcoding helper (which supports recent CSS) only works for transcoding, it is not a browser-like solution. Yes it can decompose the animation shorthand into animation-name, animation-duration and friends, because css4j does that, but won't use them at all. In theory, it should be possible for an application to establish their own timers and then repeat the transcoding several times as needed, but it would not be very efficient. Will they be supported? Nobody is being paid to work on EchoSVG, and implementing CSS animations would be a large project, so I doubt that neither Batik nor EchoSVG are ever going to support that. When it comes to implementing web standards, keep in mind that the major browsers have budgets well into the nine-figures realm (look at the Mozilla budget, and they still struggle to keep up with their browser). Batik itself was written by an international team of developers, most or all of them being paid for that. It would be nice if this project had lots of full-time developers and resources, but that is not the case. Carlos — Reply to this email directly, view it on GitHub <#61 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUVD4A7EKZX2747FK7OHXCLV4I7A7ANCNFSM572CAKDQ> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AUVD4A6GQR2HW5HERRZ7FR3V4I7A7A5CNFSM572CAKD2YY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAA3ABTQ.gif> Message ID: ***@***.*** ***@***.***> >

[carlosame]

What we need to support however is transformation, specifically

• transform:-rotate(var(--angle))
• transform: translate(var(--x-origin), var (--y-origin))

Will that work?

EchoSVG supports only CSS2, except for colors and selectors. The CSS transforms aren't part of CSS2 and therefore not supported. However, it does support the SVG transform attribute:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

If you compute the style with css4j and then convert the CSS transform property into a transform attribute, that may work.

This is something that the transcoding Helper could do in the future.

I have difficulties finding the environment description for echo-svg.

I added that information to the Wiki Home a few days ago:

https://github.com/css4j/echosvg/wiki#java-runtime

I do not plan to skip Java 8 support anytime soon.

Build using gradle 4.0.2 (slight chance to be updated to gradle 5 in future)

EchoSVG does not impose a specific build tool (or version) on downstream projects.

[mra-miratech]

Carlos, sorry to come back to you, but I’m at a point where we consider replacing batik with your fork. I need your help to prep a decision. There may be documentation on the subjects, but it is impossible to find. I have attached an SVG that includes a transform, plus a version of it where I have manually replaced the transformation by its corresponding svg attribute as per your advice. My questions on it are as follows: 1. Is there a way to programmatically read the value any of the custom property in :root (e.g. –color1) and how? 2. Is there a way to programmatically write to any of the custom properties in :root and how? Will the change cascade then down to the svg element applying the var(…) automatically? 3. Is there any way to get the nodes that use a specific class? In batik once I construct the document from a file, I only see “getElementById”, but not “getElementsByClass” 4. How do I compute a style for a given Element/Node once I have read it? 5. Is the css4j part of your packages or do I have to install that separately? I got access to the current solution of the customer. Basically, what they do is getting all styles as a String, string parse for stuff and replace it (like replace var() by the actual value) in all css formatting, and then write it back to the SVG before they encode it. InputStream inputStream = new ByteArrayInputStream(bytes); String uri = "ord://" + ord; String parser = XMLResourceDescriptor.getXMLParserClassName(); SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser); SVGOMDocument document = (SVGOMDocument)f.createDocument(uri, inputStream); Node styleNode = document.getElementById("styles"); String originalStyles = styleNode.getTextContent(); String newStyles=updateCSSProperties(originalStyles); …. //GVT is the data structure used internally to render the document GVTBuilder builder = new GVTBuilder(); GraphicsNode gvtRoot = builder.build(bridgeContext, document); Your help is really apprechiated.

…

-Michael Rader- Steinenäcker 8 72631 Aichtal Tel: +49 7127 977-5827 Mobil: +49 179 4212 911 Mail: ***@***.***> ***@***.*** UStId: DE341937670 Diese E-Mail enthält vertrauliche und/oder rechtlich geschützte Informationen. Wenn Sie nicht der richtige Adressat sind oder diese E-Mail irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Mail. Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Mail ist nicht gestattet. This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden. Von: carlosame ***@***.***> Gesendet: Montag, 12. September 2022 12:31 An: css4j/echosvg ***@***.***> Cc: mra-miratech ***@***.***>; Author ***@***.***> Betreff: Re: [css4j/echosvg] Extern am CSS and Custom variables (Discussion #61) What we need to support however is transformation, specifically * transform:-rotate(var(--angle)) * transform: translate(var(--x-origin), var (--y-origin)) Will that work? EchoSVG supports only CSS2, except for colors and selectors. The CSS transforms <https://www.w3.org/TR/css-transforms-1/> aren't part of CSS2 and therefore not supported. However, it does support the SVG transform attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform If you compute the style with css4j and then convert the CSS transform property into a transform attribute, that may work. This is something that the transcoding Helper could do in the future. I have difficulties finding the environment description for echo-svg. I added that information to the Wiki Home a few days ago: https://github.com/css4j/echosvg/wiki#java-runtime I do not plan to skip Java 8 support anytime soon. Build using gradle 4.0.2 (slight chance to be updated to gradle 5 in future) EchoSVG does not impose a specific build tool (or version) on downstream projects. — Reply to this email directly, view it on GitHub <#61 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUVD4A5DLZEACPCVQJ75LQ3V54A7BANCNFSM572CAKDQ> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AUVD4A5BOAIMOHYDJRVOZA3V54A7BA5CNFSM572CAKD2YY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAA3U5VI.gif> Message ID: ***@***.*** ***@***.***> >

[carlosame]

Hi,

There may be documentation on the subjects, but it is impossible to find.

For CSS4J documentation see https://css4j.github.io/

1. Is there a way to programmatically read the value any of the custom property in :root (e.g. –color1) and how?
2. Is there a way to programmatically write to any of the custom properties in :root and how?

As I mentioned in my previous reply:

EchoSVG supports only CSS2, except for colors and selectors.

So you won't be able to do custom properties with EchoSVG, you have to pre-process the document using CSS4J.

I only see “getElementById”, but not “getElementsByClass”

CSS4J's native DOM has getElementsByClassName().

Will the change cascade then down to the svg element applying the var(…) automatically?

Depending on what you change in CSS4J, it is automatically detected. Otherwise you have to use something that rebuilds the cascade, like calling setTargetMedium. Adding a specific method to force the cascade reload is something that was planned long ago and I should have added it already, but finally 3.9.0 will have it. I plan to release it the next week.

5. Is the css4j part of your packages or do I have to install that separately?

CSS4J is carried as a transitive dependency by EchoSVG, although only if you use a tool that supports Gradle or Maven metadata. Like Gradle or Maven themselves, or the Nexus commercial tool.

As those questions mostly belong to CSS4J, I'd suggest that you look at the documentation at the CSS4J website, especially:

https://css4j.github.io/usage.html

and then open a discussion there (or at https://groups.google.com/g/css4j where other people are more likely to engage) if you have more questions.

Incidentally, I plan to support CSS4J native DOM documents as valid inputs for EchoSVG transcoding in 0.3. This may be useful to you.

[carlosame]

Incidentally, I plan to support CSS4J native DOM documents as valid inputs for EchoSVG transcoding in 0.3. This may be useful to you.

I mean as valid inputs for the transcoder helper. You can already use CSS4J DOM documents as normal transcoder inputs via TranscoderInput.

[carlosame]

Otherwise you have to use something that rebuilds the cascade

Adding a specific method to force the cascade reload is something that was planned long ago and I should have added it already, but finally 3.9.0 will have it. I plan to release it the next week.

Today I released css4j 3.9.0 which adds rebuildCascade() to all the CSS-enabled document implementations in the library. Also added a few new sections to the Usage Guide (https://css4j.github.io/usage.html).

[mra-miratech]

Carlos, To your answer below on Will the change cascade then down to the svg element applying the var(…) automatically? Depending on what you change in CSS4J, it is automatically detected. Otherwise you have to use something that rebuilds the cascade, like calling setTargetMedium. Adding a specific method to force the cascade reload is something that was planned long ago and I should have added it already, but finally 3.9.0 will have it. I plan to release it the next week. If I would use vanilla Batik, and I have already a parsed SVG XML Document in memory, and that document has a styles section (<style> tag with CSS selectors etc,): When I update the styles in memory and render the image, the updated styles are NOT reflected on the image. I tried your recommendation using svgDocument.getCSSEngine().setMedia(“print”), followed by svgDocument.getCSSEngine().setMedia(“screen”), but still it does not recompute the styles. Can you help?!

…

-Michael Rader- Steinenäcker 8 72631 Aichtal Tel: +49 7127 977-5827 Mobil: +49 179 4212 911 Mail: ***@***.***> ***@***.*** UStId: DE341937670 Diese E-Mail enthält vertrauliche und/oder rechtlich geschützte Informationen. Wenn Sie nicht der richtige Adressat sind oder diese E-Mail irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Mail. Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Mail ist nicht gestattet. This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden. Von: carlosame ***@***.***> Gesendet: Samstag, 15. Oktober 2022 15:27 An: css4j/echosvg ***@***.***> Cc: mra-miratech ***@***.***>; Author ***@***.***> Betreff: Re: [css4j/echosvg] Extern am CSS and Custom variables (Discussion #61) Hi, There may be documentation on the subjects, but it is impossible to find. For CSS4J documentation see https://css4j.github.io/ 1. Is there a way to programmatically read the value any of the custom property in :root (e.g. –color1) and how? 2. Is there a way to programmatically write to any of the custom properties in :root and how? As I mentioned in my previous reply: EchoSVG supports only CSS2, except for colors and selectors. So you won't be able to do custom properties with EchoSVG, you have to pre-process the document using CSS4J. I only see “getElementById”, but not “getElementsByClass” CSS4J's native DOM has <https://css4j.github.io/api/latest/io.sf.carte.css4j/io/sf/carte/doc/dom/DOMDocument.html#getElementsByClassName(java.lang.String)> getElementsByClassName(). Will the change cascade then down to the svg element applying the var(…) automatically? Depending on what you change in CSS4J, it is automatically detected. Otherwise you have to use something that rebuilds the cascade, like calling setTargetMedium. Adding a specific method to force the cascade reload is something that was planned long ago and I should have added it already, but finally 3.9.0 will have it. I plan to release it the next week. 5. Is the css4j part of your packages or do I have to install that separately? CSS4J is carried as a transitive dependency by EchoSVG, although only if you use a tool that supports Gradle or Maven metadata. Like Gradle or Maven themselves, or the Nexus commercial tool. As those questions mostly belong to CSS4J, I'd suggest that you look at the documentation at the CSS4J website, especially: https://css4j.github.io/usage.html and then open a discussion there (or at https://groups.google.com/g/css4j where other people are more likely to engage) if you have more questions. Incidentally, I plan to support CSS4J native DOM documents as valid inputs for EchoSVG transcoding in 0.3. This may be useful to you. — Reply to this email directly, view it on GitHub <#61 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUVD4A3XOJD7SUIRJUQDXL3WDKWJBANCNFSM572CAKDQ> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AUVD4A66ISPRH5ERUMZNKQLWDKWJBA5CNFSM572CAKD2YY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAA5UR3Q.gif> Message ID: ***@***.*** ***@***.***> >

[carlosame]

If I would use vanilla Batik, and I have already a parsed SVG XML Document in memory, and that document has a styles section (<style> tag with CSS selectors etc,): When I update the styles in memory and render the image, the updated styles are NOT reflected on the image.

I tried your recommendation using svgDocument.getCSSEngine().setMedia(“print”), followed by svgDocument.getCSSEngine().setMedia(“screen”), but still it does not recompute the styles.

My advice was clearly about CSS4J, not Batik. As I wrote previously, if you need support about Batik please contact the Apache Batik project:

https://xmlgraphics.apache.org/batik/mailing-lists.html