Closed carlosame closed 2 years ago
Thank you @bfiics for your feedback. I'm pushing a new version where I added a dark-mode toggle, and also a setXMLReader
method that allows an arbitrary document parser (even an HTML5 parser) to be used.
I plan to merge this today.
Keep up the good work man!
CSSTranscodingHelper
Utility for transcoding documents that use modern CSS, bypassing the EchoSVG style computations.
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:
to:
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 (advancedattr()
) • 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
andSVGAbstractTranscoder.KEY_HEIGHT
transcoding hints. And the target medium (screen, print, etc.) can be set via theSVGAbstractTranscoder.KEY_MEDIA
hint.For example:
Using a selector
You can also 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:Foreign Elements
The processing of foreign elements 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.