SVG ToolsLesson 183Free preview

SVG Placeholder Generator

This lesson is part of Web Developer Tools · All levels

Summary

SVG Placeholder Generator creates a specific-sized placeholder image with background and text, for example 400 x 200 pixels written Preview. Because it is SVG-shaped, the placeholder remains sharp on the retinal screen and is very small in size. Placeholders are useful during design or development before the original images are available.

Key points

Determine width, height, and viewBox
Text can be positioned in the middle with text-anchor and dominant-baseline
SVG is vector-like so it doesn't break when magnified
The placeholder is not a substitute for the final image
Include alternative text when used as an image

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.