Do you use placehold.it? It is a great service. The only thing is when you are offline, or you are testing a page that needs a lot of placeholders, it may not be the greatest solution.

Enter the SVG placeholder.

Here are the properties you can set:

  • width and height
  • background-fill
  • font-color
  • font-family
  • font-size

Here is the actual SVG file. As you can see it is a PHP file, but you are serving it as an SVG (see the Content-Type part?). Here we grab the URL arguments and assign them to the SVG.

If you saved the file as placeholder-svg.php then it would be used like so:

<img src="placeholder-svg.php?wh=400x400&fill=bada55&color=000000&font=Georgia&size=20" />

This would be the output:

Placeholder Example