Use JavaScript to add SVG Data Attributes to Objects to suit device widths

This prototype tests the JavaScript setAttribute() property to add data attributes to object elements to inject external SVG files according to the client browser window width. The purpose is to switch dynamic SVG objects between mobile and desktop layouts.

This is content above the SVG object.

Help needed, Seeking Answers:

Question One:

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.

This prototype uses JavaScript to load the SVGs, using the .setAttribute() method. Not being an expert with JavaScript, I've cobbled together code from various resources. It works but the result is janky. The JavaScript includes a window.onresize function that causes the SVG to jitter and reload/repaint. Is there any way to improve this code to reduce FLOUT?

Question Two:

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).

Any ideas?

Here are links to resources I used:


This is content below the SVG object.