Icon Design Technology & Digital Applications 2 — Questions and Answers
Question 1: Which file format is best suited for an icon that must scale from 16px to 512px without quality loss?
- JPEG
- SVG (Correct answer)
- BMP
- TIFF
Correct answer: SVG
SVG is a vector format that scales infinitely without losing quality, making it ideal for multi-size icon use.
Question 2: What does the term 'pixel density' refer to in the context of icon design for screens?
- The number of colors used in an icon
- The number of pixels per inch (PPI) on a display (Correct answer)
- The file size of an icon image
- The opacity level of icon layers
Correct answer: The number of pixels per inch (PPI) on a display
Pixel density (PPI) measures how many pixels fit per inch on a display, affecting how sharp icons appear.
Question 3: When designing icons for a Retina (2x) display, what should you do to ensure sharpness?
- Export at half the intended display size
- Export at double the intended display size (Correct answer)
- Use JPEG compression to reduce artifacts
- Limit the icon to two colors only
Correct answer: Export at double the intended display size
Retina displays use 2x pixel density, so exporting at double the display size ensures crisp rendering.
Question 4: Which color mode should icon assets be in for screen/digital display output?
- CMYK
- Pantone
- RGB (Correct answer)
- LAB
Correct answer: RGB
RGB (Red, Green, Blue) is the color mode used for digital screens, while CMYK is for print.
Question 5: What is the purpose of an icon sprite sheet in web development?
- To animate icons using CSS keyframes
- To combine multiple icons into one image file to reduce HTTP requests (Correct answer)
- To store icon metadata for accessibility tools
- To define icon color palettes globally
Correct answer: To combine multiple icons into one image file to reduce HTTP requests
A sprite sheet combines many icons into a single image, reducing the number of server requests and improving load speed.
Question 6: Which property in CSS is used to apply an SVG icon as a background image on a web element?
- icon-url
- background-image (Correct answer)
- src
- content
Correct answer: background-image
The CSS `background-image` property accepts a URL value that can reference an SVG file or inline SVG data URI.
Question 7: What is the significance of the `viewBox` attribute in an SVG icon file?
- It sets the icon's background color
- It defines the coordinate system and visible area of the SVG content (Correct answer)
- It controls the animation speed of the icon
- It specifies the export resolution of the icon
Correct answer: It defines the coordinate system and visible area of the SVG content
The `viewBox` attribute defines the internal coordinate space, allowing the SVG to scale proportionally at any rendered size.
Icon Design Technology & Digital Applications 2
Which file format is best suited for an icon that must scale from 16px to 512px without quality loss?