← Back to Snippets

placeholder.svg

Published

Here’s an SVG image you can use as a placeholder when prototyping a page layout. The image will maintain its appearance regardless of size, thanks to the vector-effect declaration. See how that looks.

<svg 
	xmlns="http://www.w3.org/2000/svg"
	preserveAspectRatio="none"
	viewBox="0 0 1 1"
	fill="none" 
	stroke="black"
>
	<path
		d="M0,0H1V1H0V0"
		stroke-width="2" 
		vector-effect="non-scaling-stroke"
	/>
	<path 
		d="M0,0L1,1M1,0L0,1"
		vector-effect="non-scaling-stroke"
	/>
</svg>

You use it as a normal image:

<img src='/demos/placeholder.svg' alt='Placeholder'>
Placeholder

Alternative approaches

You can also draw the image with CSS for a similar effect:

img:not([src]) {
	--stroke-width: 1px;
	border: var(--stroke-width) solid;
	background-image: 
		linear-gradient(
			to bottom right, 
			transparent calc(50% - var(--stroke-width) / 2), 
			currentColor, 
			transparent calc(50% + var(--stroke-width) / 2)
		), 
		linear-gradient(
			to top right, 
			transparent calc(50% - var(--stroke-width) / 2), 
			currentColor, 
			transparent calc(50% + var(--stroke-width) / 2)
		);
}
Placeholder