Multimedia 3 November
Visual resources
A teacher recommends building infographics in HTML and SVG rather than as generated images
A member of Vibe Coding Educativo argues that, to illustrate concepts, AI should generate SVG shapes and icons in an HTML page, with generated images kept for when they are pedagogically necessary.
The proposal came up in a discussion of using vector illustrations instead of AI-generated images. Its author recommends asking AI to build the infographic as an HTML page with SVG shapes and a single family of icons, checking it thoroughly and, if needed, exporting it to PNG afterwards.
The advantages listed include sharpness; control for whoever creates it; consistency across resources, which makes it possible to set a shared “style book”; accessibility, because a screen reader can read the text of an HTML infographic but not that of an image without a description; and automatic adaptation to light and dark modes. HTML also supports collapsible components that reveal information in stages, which, in this view, helps avoid cognitive overload and adds a degree of interactivity.
Members also advised steering clear of infographics overloaded with decorative elements, generating images only when the teaching objective requires it, and always crediting the chosen icon family. Lucide, mentioned in the group, is an open-source set of SVG icons released under the ISC licence.
For teachers, the practical takeaway is knowing when an editable, accessible infographic is the better choice and when a generated image is.
Read the original conversation in Vibe Coding Educativo
