Schmarsow, Prisca ORCID: https://orcid.org/0009-0003-6756-6420 (2026) SVG Icons 3 ways. [Teaching Resource]

Preview	Image (JPEG) (Poster) 52532 SCHMARSOW_SVG_Icons_3_Ways_(POSTER)_2026.jpg - Other Available under License Creative Commons Attribution Non-commercial Share Alike. Download (223kB) | Preview
Preview	PDF (Webpage Text) 52532 SCHMARSOW_SVG_Icons_3_Ways_(WEBPAGE TEXT)_2026.pdf - Accepted Version Available under License Creative Commons Attribution Non-commercial Share Alike. Download (142kB) | Preview

Abstract

This open educational resource provides comprehensive technical instruction on implementing Scalable Vector Graphics (SVG) in web design contexts. The resource addresses three distinct implementation methods—SVG as image element, CSS background, and inline code—explicating the technical constraints and appropriate use cases for each approach. Through a structured tutorial creating personalised monograms and functional UI icons, the resource demonstrates vector graphic creation, path optimisation, and export workflows from design applications including Adobe Illustrator and Figma. It examines critical technical concepts including the currentColor keyword for CSS inheritance, data URI encoding for embedded graphics, and progressive enhancement strategies for browser compatibility. The resource emphasises accessibility requirements through appropriate ARIA attributes and semantic markup patterns. Practical implementation examples demonstrate parent-element hover states, decorative background patterns, and responsive scaling techniques. The tutorial integrates professional design considerations including visual hierarchy, consistent iconography, and performance optimisation through file compression, providing students with production-ready skills for implementing scalable graphics in portfolio and client projects.

Item Type:	Teaching Resource
Uncontrolled Keywords:	vector graphics, web design, front-end coding, HTML, CSS, SVG code
Subjects:	N Fine Arts > N Visual arts (General) For photography, see TR N Fine Arts > NC Drawing Design Illustration Q Science > QA Mathematics > QA75 Electronic computers. Computer science
Faculty / School / Research Centre / Research Group:	Faculty of Law, Arts and Social Sciences Faculty of Law, Arts and Social Sciences > School of Design and Creative Industries
Last Modified:	24 Feb 2026 11:09
URI:	https://gala.gre.ac.uk/id/eprint/52532

Actions (login required)

View Item

Downloads