This is content above the SVG object.
Help needed, Seeking Answers:
I am looking for a way to load different SVGs for different device layouts. Of the few elements that can serve SVGs dynamically, with links and hover,
object is the best choice. however, with objects the SVG is loaded via a data attribute, and there is no CSS method to change data attributes.
There is a second issue to contend with, maybe not as severe but strange. Looking at the console, the
symbol elements within the SVG cause an error:
Error: < symbol > attribute viewBox: Unexpected end of attribute. Expected number, "0 30".
I cannot tell if this is really a problem or what to do about it. simply adding extra integers causes the SVG not to render.
The original hexagon size is 100x90. Using those numbers in the symbol viewbox by themselves makes the hexagons become huge. However, if I add "px" to the units everything snaps into place, but I get a new console message:
Error: < svg > attribute viewBox: Expected number, "0 0 100px 90px".
In this demo one SVG has a symbol viewbox="0 0 100px 90px" (SVG_dynamic-test_02.svg). The other has symbol veiwbox="0 30" (SVG_dynamic-test_01.svg).
Here are links to resources I used: