SVG Rendering?

[EnCey]

I am looking for a way to convert SVG images to other image formats (i.e. PNG). Many available libraries do not support e.g. non-local images used in an SVG and up to now I couldn't find any that support embedded fonts (neither embedded via data URI nor via URL).

I stumbled upon your project and simply wanted to ask whether you happen to know a good SVG rendering library, or how far you've come with creating your own?

[FlorianRappl]

In the past I've used the SVG rendering engine. It seems to be forked on GitHub these days (https://github.com/vvvv/SVG). But I didn't use it extensively and I guess the non-local image problem exists with the SVG rendering engine.

I do not plan to write my own library, but I guess something like AngleSharp.Svg, which builds upon AngleSharp and a component such as the SVG rendering engine (, or something different) could be possible. This component would only use the rendering / SVG knowledge of the () library. AngleSharp would parse the content already and download any (external) images / resources.

At the moment I do not have time for that project, but who knows what will happen in the future (or maybe somebody else is interested in pursuing that project).

[EnCey]

Might be I could lend a hand if we can't find any alternatives.

Is the part where AngleSharp parses the SVG and downloads external resources already completed, or is this also something that has yet to be done?

[FlorianRappl]

SVG itself is just plain XML - that works with the XML parser. SVG in HTML is covered as per HTML 5.1 specification. If one does use the BrowsingContext to OpenAsync some URL, then (if the URI returns an SVG document as per MIME-type) a new SvgDocument will be instantiated. The SvgDocument instance will be populated by the XML parser.

Right now no resources inside an SVG document are downloaded. Reason is that the SVGOM is not complete and does not know about any specifics (such as external resources). But in general AngleSharp can download resources.

[driekus77]

Hi @FlorianRappl,

Sounds great SVG to images like .png, .jpg, and .gif. What is the status?
Can I help in anyway? Is https://github.com/vvvv/SVG the way to go?
Do you have implementation detailed idea's?

Kind regards,
Henry

[FlorianRappl]

No details available yet, but I guess that this won't be part of AngleSharp.Core. I still tend to have some coarse object model being generated by AngleSharp (the HTML5 foreign elements cover that pretty much), which is then "converted" to some other OM (e.g., by the library you mentioned). But again: The connection of AngleSharp to the other library should be made in a 3rd component.

[driekus77]

If I understand correctly its a little bit to early to start with a 3rd component?

Maybe I can help in another way? Setup the 3rd component and/or unit tests?

Kind regards,
Henry

[FlorianRappl]

I guess its too early for the 3rd component, but if you want to you can start and maybe it turns out to be an ideal fit right away.

[TFTomSun]

Since this topic is open already for a long time, I would like to ask for the current state of SVG parsing. We want to parse an SVG based component template system and want to map elements from a real browser dom (rendered component) to the elements within the template files and vise versa. I think this library could be a great help to achieve our goal. @FlorianRappl Is something like that possible with AngleSharp when the template system follows the w3c spec of SVG + some compatible custom additions? Are there parts where we could contribute to fulfil the SVG spec?
Some SVG feature that I know we need to parse:

• defs
• SVG elements within in SVG elements
• local references
• custom namespaces / custom tags

I think we will also need some possibility to hook into the parser and resolve the custom template parts to standard SVG. Are such hooks or extensions of the parser possible?

[FlorianRappl]

Regarding SVG parsing: It can be fully parsed either as part of an HTML5 document (AngleSharp.Core) or as standalone with the XML parser (AngleSharp.Xml).

Is something like that possible with AngleSharp when the template system follows the w3c spec of SVG + some compatible custom additions?

Depends on the "custom additions". But for the rest of the question: I'd say yes.

Are there parts where we could contribute to fulfil the SVG spec?

I think there are two areas where the model in AngleSharp could be improved right now:

1. Improve the SVGOM - right now only a few (though quite distinct) interfaces are implemented: https://github.com/AngleSharp/AngleSharp/tree/devel/src/AngleSharp/Svg/Dom; everything else is the generic SvgElement (https://github.com/AngleSharp/AngleSharp/blob/devel/src/AngleSharp/Svg/SvgElementFactory.cs)
2. Based on the XML parser provide an SVG parser. It would use the XML parser for the parsing rules, but use the SVG elements / element factory to spit out an SVG Document. Right now such a thing already exists to react / parse detected SVG responses. The AngleSharp.Xml registers such a parser: https://github.com/AngleSharp/AngleSharp.Xml/blob/devel/src/AngleSharp.Xml/XmlConfigurationExtensions.cs#L49 - in any case it should be also directly callable and utilize the SvgDocument to the fullest

Both points (1) and (2) would require a few more tests and few more compliance / improvements towards the SVG spec.

I think we will also need some possibility to hook into the parser and resolve the custom template parts to standard SVG. Are such hooks or extensions of the parser possible?

Hm for such points (like the question above) an example would be good. In general the parser streams through and is split in multiple units, most importantly a tokenizer and an OM builder. I think the tokenizer would always be fine - for the OM builder presumably a wrapper would be necessary depending - if it really needs to be resolved at the construction level.

[mircogericke]

A lot of the SVGOM seems to already exist in SharpVectors. Perhaps some of that implementation can be adapted to AngleSharp instead of being written from scratch to minimize duplicated effort.