Home

EchoSVG

EchoSVG is a fork of Apache Batik, a Java based toolkit for applications which handle images in the Scalable Vector Graphics (SVG) format for various purposes, such as viewing, generation or manipulation.

This project is a vast improvement over Batik.

SVG support

Like Batik, EchoSVG is built on SVG 1.1 although also supports part of the (deprecated) SVG 1.2 specification and has some support of SVG2 (like the namespaceless href attribute).

CSS support

EchoSVG supports most of modern CSS:

• Level 4 CSS selectors.

text:nth-child(-n + 3) {
  font: 14pt var(--my-font);
}

• Level 4 colors (including colors with alpha channel) and color-mix() from Level 5. Not only you can transcode SVG to an image with an embedded color profile, but also generate SVG with colors of arbitrary color spaces via SVGGraphics2D.

fill: color(display-p3 .4 .25 .11 / .8);

• Custom properties (var() function).

fill: var(--my-color, blue);

• The @property rule (registered custom properties).

@property --my-length {
  syntax: "<length>";
  inherits: true;
  initial-value: 4px;
}

• @supports rules.

@supports (color: oklch(67% 0.18 270)) {
  g {
    --my-color: oklch(45% 0.3 264);
    --my-stroke-width: calc(1px + var(--my-length));
  }
}

• Level 4 Media Queries, including the prefers-color-scheme media feature. You can match the different media queries through transcoding hints like KEY_PREFERS_COLOR_SCHEME, KEY_MEDIA or KEY_WIDTH.

@media screen and (300px < width <= 1000px) and (prefers-color-scheme: light) {
  text.myclass {
    font-size: calc(var(--my-FontSize) + 2pt);
  }
}

See also other hints that are used in Media Queries, like KEY_RESOLUTION_DPI or KEY_HEIGHT.

• The turn, Q, vw, vh, vmin, vmax, lh, rlh, rem and rex units.

• calc() expressions, both in CSS properties/attributes and non-CSS attributes. You can write y = "calc(30% + 2vmin)" for example, like you'd do with modern web browsers.

• The advanced attr() value.

ellipse {
  fill: attr(data-color type(<color>), #22a);
}

• The initial, unset and revert CSS-wide keywords.

For an example of the CSS that can be processed with EchoSVG, please look at this sample test file featuring custom properties, @supports and level 4 @media rules.

Java Runtime

EchoSVG is compatible with Java 8 and later, although module-info files are provided for modular JDKs.

Why EchoSVG instead of Batik?

If you wonder why EchoSVG was created and which are the reasons to use it instead of Batik, please check Why EchoSVG.

Documentation

• Migrating from Apache Batik

• Using EchoSVG in a Gradle project

• Using EchoSVG in a Maven project

• Running EchoSVG from a Uber Jar

• Transcoding basics

• Transcoding SVG with CSSTranscodingHelper

• Generating SVG with the Graphics2D API

• Security and Privacy considerations

• FAQ

• API: compressed javadoc archive (please use the 7-zip archiver to uncompress)

• API: Online javadocs

Licensing

The software is available under an Apache 2.0 license but some of the files in the repository are under different licenses, please read the LICENSE and NOTICE files for details. The tests use files which may have their own additional licenses, under the samples directory. Please look for the appropriate license files there.

Important Note

This project is not available from Maven Central, as its maintainer does not accept Maven Central's Terms of Use, see also issue #95. The project distributes its artifacts through the css4j Maven repository.