0
<svg viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="mask0" mask-type="alpha">
    <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547 
    130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
    97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
    0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
</mask>
<g mask="url(#mask0)">
    <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 
    165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
    129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
    -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
    <image class="home_blob-img" href="assets/img/perfil.png"/>
</g></svg>

i use this code to show a blob shape in my webpage and insert an image as blob background

Kaiido
  • 123,334
  • 13
  • 219
  • 285

1 Answers1

-1

Using to embed SVG like this:

<img src="my-file.svg" />

Or using CSS background image like this:

#id {

background-image: url(image.svg);}

These are by far the best choice for static graphics, but could result in missing fonts.

Why?

and background image are not allowed to access to externals links due to security concerns and in this case, the font @import URL is inaccessible, resulting in missing fonts or the fonts being rendered using Times New Roman.