Answer & Solution
<use>
element with the SVG file path and the desired icon's ID.
<use>
element with the SVG file path and the desired icon's ID.
How can you create a hover effect for an SVG icon using CSS?
A). Apply :hover pseudo-class to the SVG element
B). Use JavaScript for hover effects
C). Add a <hover>
attribute to the SVG icon
D). Apply a class on hover using JavaScript
What technique can be used to change the color of an SVG icon on user interaction?
A). Apply CSS styles on hover or click events
B). Use JavaScript to dynamically change the SVG's color
C). Embed multiple versions of the SVG with different colors
D). Apply inline styles to the SVG icon
How can you ensure cross-browser compatibility when using SVG icons with CSS?
A). Test SVG icons across different browsers and versions
B). Include vendor prefixes for CSS properties
C). Use polyfills for unsupported CSS features
D). Convert SVG icons to raster images
How can you include an SVG sprite sheet in an HTML document for displaying icons?
A). Using the <img>
element with the sprite sheet path
B). Using the <object>
element with the sprite sheet path
C). Using the <use>
element with the sprite sheet path
D). Using the <embed>
element with the sprite sheet path
How can you animate an SVG icon using CSS animations?
A). Define animation keyframes and apply them to the SVG icon
B). Use the animate element within the SVG file
C). Apply JavaScript code for animations
D). Use external animation libraries
Which attribute of SVG sprite <symbol>
elements is used to define a unique ID for each icon within the sprite sheet?
A). id
B). name
C). class
D). label
What is the recommended approach for optimizing SVG icons for web use?
A). Minimize file size, remove unnecessary code, and optimize paths
B). Increase file size for better quality
C). Use inline styles for all SVG elements
D). Embed external CSS files into SVG
How can you apply CSS styles to an SVG icon referenced using the <use>
element?
A). Apply styles directly to the <use>
element
B). Apply styles to the referenced SVG file
C). Apply styles to the <svg>
element containing the <use>
element
D). Apply styles to the parent container of the <svg>
element
How can you add a title to an SVG icon for accessibility purposes?
A). Using the <desc>
element
B). Using the <span>
element
C). Using the <title>
element
D). Using the <header>
element
What is the purpose of the viewBox attribute in SVG icons?
A). Defines the coordinate system and aspect ratio
B). Specifies the fill color of the icon
C). Sets the icon's size
D). Determines the file format of the icon