Module:Sandbox/Bawolff/interactiveSvg/doc

Testing out some things with interactive images.

Dark mode

Note: this map is a big file that gets directly inserted into the page. This is unideal for performance and you probably dont want to use such a large file in a real article.

Also, there are some reports that this only works with system darkmode on macs (but not the skin toggle). Probably needs more testing.

Italy and Spain are a different colour depending on dark mode vs light mode

{{#invoke:Sandbox/bawolff/programmableMap|europe
|fr=red
|de=green
|it=light-dark( blue, yellow )
|es=light-dark( #b2b, #525 )
|width=300
}}

Dynamically generating chemical images

[This isn't "interactive in any sense, just thought it was a cool usage of mw.svg. You put in a .mol file and get out an image] - Module:Sandbox/Bawolff/CineMol

×

Penicillin-G

CSS3 animation

(Image credit is File:Snow_css3_animation_example.svg by User:Cmglee)

SMIL animation

Image: File:toy_train_SMIL.svg by User:Cmglee

File:Trajans-Column-lower-animated.svg

(Original image by User:Hk kng). This uses the calculator gadget to adjust layers. Clicking on parts of the image will cause the cut-away of that part to be shown.

Cut-aways to show (Or click directly on image)

First floor (front)

First floor (back)

Second floor (left)

Second floor (right)

Third floor (front)

Third floor (back)

Fourth floor (left)

Fourth floor (right)

Fifth floor

Sixth floor