CSSTranscodingHelper

CSSTranscodingHelper

Found in the io.sf.carte.echosvg.transcoder.util package, it is an utility for transcoding documents that use modern CSS, bypassing the EchoSVG style computations which (except for selectors) are mostly tied to the old CSS2.

Markup recommendations

To obtain the best results, your document should define style properties in a style sheet or the style attribute, instead of using style-like attributes like font-size.

For example it is preferable:

<text style="font-size: 20px;">  

to:

<text font-size="20">  

Supported CSS

Modern CSS is allowed, with most of the following specifications being supported:

• Selectors Level 4.

• Values and Units Level 4 (calc(), viewport-based units).

• Values and Units Level 5 (advanced attr()).

• Color Level 4 (color(display-p3 -0.61 1.09 -0.22)).

• Custom properties Level 1 (var()).

• Properties and Values API Level 1 (@property rule).

• Media Queries Level 4 (@media screen and (400px <= width <= 700px)).

• Conditional Rules Level 3 (@supports (color: lch(45% 30 60))).

Configuring for Media Queries

Media Queries use the SVG viewport dimensions by default, but you can set the dimensions used by queries by setting the SVGAbstractTranscoder.KEY_WIDTH and SVGAbstractTranscoder.KEY_HEIGHT transcoding hints. And the target medium (screen, print, etc.) can be set via the SVGAbstractTranscoder.KEY_MEDIA hint.

For example:

   Transcoder transcoder = new PNGTranscoder();

   CSSTranscodingHelper helper = new CSSTranscodingHelper(transcoder);

   helper.getTranscoder().addTranscodingHint(SVGAbstractTranscoder.KEY_MEDIA, "screen");
   helper.getTranscoder().addTranscodingHint(SVGAbstractTranscoder.KEY_WIDTH, 450);
   helper.getTranscoder().addTranscodingHint(SVGAbstractTranscoder.KEY_HEIGHT, 500);

   String uri = "https://www.example.com/my_image.svg";
   java.io.Reader re = ... [SVG document reader]
   java.io.OutputStream os = ... [where to write the image]

   TranscoderOutput dst = new TranscoderOutput(os);

   helper.transcode(re, uri, dst, null);

Dark mode

You can enable the dark mode with

helper.setDarkMode(true);

Using a selector

You can render <svg> elements that are located inside an HTML document. By default, the first <svg> element (in document order) will be used, but you can point to a specific one using a CSS selector. For example:

 helper.transcode(re, uri, dst, "#mySvg");

Foreign elements

The processing of foreign elements located inside a <foreignObject> is performed via SVG 1.2 features. Therefore, if a document contains foreign elements, the <svg> element should either not have a version attribute, or that attribute's value must be 1.2 or 2.