Use a SVG-shape for images in WordPress

inline-portrait.svg.php

<!-- this is our svg in /images/inline-portrait.svg.php. Make sure the filename ends with *.svg.php -->
<!-- in the "pattern" we create a unique identifier with a sanitized url of the image -->
<!-- this "id" is used as "fill" -->

<svg aria-label="<?php the_title(); ?>" role="img" viewBox="0 0 256 257" version="1.1" class="">
    <title><?php the_title(); ?></title>
    <defs>
        <pattern id="imageID-<?php echo trim(preg_replace('/[^a-z0-9]+/i',"", strtolower(htmlspecialchars_decode($url)))); ?>" width="100%" height="100%" patternUnits="userSpaceOnUse">
            <image height="100%" width="100%" x="0" xlink:href="<?php echo $url;?>" y="0"></image>
        </pattern>
    </defs>
    <g fill="url(#imageID-<?php echo trim(preg_replace('/[^a-z0-9]+/i',"", strtolower(htmlspecialchars_decode($url)))); ?>)">
        <path stroke="" class="strokeWidth" d="M1,128 C-4.92992601,249.698873 87.9635986,256 122.178175,255.590698 C156.392751,255.181395 218.754149,233.573371 243.18795,183.392256 C259.477151,149.938178 259.477151,89.0407775 243.18795,0.700053043 C85.6826007,4.43410214 4.953284,46.8674178 1,128 Z"></path>
    </g>
</svg>

template.php

<?php
// in your template:
// submit an image url via set_query_var like this
set_query_var('url', get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ));
// get template_part from an svg
get_template_part('images/inline','portrait.svg');
?>

– Inspired by XING