LegionMammal978 9 days ago

One fun thing that can be done with SVG files: you can use entities in an inline DTD to define constants to be shared across different places in the file. You can see some great examples of this in the SVGs in David Ellsworth's "Squares in Squares" page [0].

The major browsers have no issues with this, though note that some tools like Inkscape won't parse the DTD nor expand the entities.

[0] https://kingbird.myphotos.cc/packing/squares_in_squares.html

5
tannhaeuser 8 days ago

You say "entities" but that term is actually the name for SGML/XML's mechanism to define arbitrary syntactic content for reference/reuse with entity references a la &ref, whereas in SVG you can park shapes/paths/whatever under refs, giving those an id attribute value, and then <use> those element in the body SVG content, which is also what the page you linked is using (for each individual SVG ie. there's no sharing of rectangles across the many pictures since these are pulled-in individually via <embed> inot their own DOM rather than used as inline SVG).

I wonder why SVG's original designers found it necessary to supply an ad-hoc re-implementation of the entity mechanism. I think it might have to do with how rendering properties can be overridden at the usage site? At least I don't think it was established that browsers ignore entity definitions or basically anything in the document prolog/DOCTYPE considering SVG was part of W3C's push to replace HTML's SGMLish legacy syntax with XHTML/XML.

jarek-foksa 8 days ago

Entities seem to be resolved at parse time, so they are more like a preprocessor directives. <use> is much more powerful as all instances are "live" and updated dynamically when you change the original object.

If I recall correctly, the primary motivation behind <symbol> and <use> was interoperability with corresponding primitives in Adobe Illustrator.

LegionMammal978 8 days ago

> which is also what the page you linked is using

To be clear, it's using both of them for different purposes, you'll find both <use> elements and <!ENTITY> declarations in files like https://kingbird.myphotos.cc/packing/square-11.svg. You can't <use> a numeric quantity in an attribute, the closest alternative for those would be CSS variables.

As for the existence of <use>, I agree with jarek-foksa, the idea is that the original element and all its clones from <use> are linked in the DOM at runtime, as opposed to DTD entities which are baked in textually. Also, most people hate XML, I'd imagine they'd hate internal DTDs doubly so, especially with how little information can be found about them outside the XML standard.

(Browser devs also love to beat the drum of minimizing attack surface, so it's a bit surprising that DTDs and XML stylesheets still work at all. I'd expect them to tear out that functionality in a heartbeat if it were ever used in a modern exploit.)

lenkite 8 days ago

Maybe I am missing something, but can't find any !doctype or !element that would represent a DTD on that page. If you are talking simply about SVG defs and use - that isn't a DTD.

LegionMammal978 8 days ago

They're all in the standalone files, e.g., look at the source of https://kingbird.myphotos.cc/packing/square-11.svg. It defines a bunch of entities to represent various lengths and angles, which obviously can't be <use>d. (CSS variables would be an alternative these days, but many non-browser tools such as librsvg will have trouble with those as well.)

lenkite 7 days ago

Aah thanks - these don't show up in the chrome inspector as by that time they are apparently already substituted.

timewizard 9 days ago

You can also extract different parts of an existing svg and use (clone) them elsewhere on the page.

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

ygra 9 days ago

I've used this to succinctly define a Sierpinski carpet on Wikimedia Commons a while ago: https://commons.wikimedia.org/wiki/File:Sierpinski_carpet_6....

That file was able to lock up or crash most SVG renderers back then.

noahbald 9 days ago

It might work in browsers but a lot of SVG tooling will ignore DTD because it’s a DOS risk.

E.g. Billion laughs attack https://en.wikipedia.org/wiki/Billion_laughs_attack

znpy 8 days ago

That page took a good five seconds to render on my 2022 iPhone se