SVG Icons 3 ways

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.