31: Puedes poner imágenes rasterizadas en SVG | Programar Plus

← Vídeo anterior Vídeo siguiente →

Probablemente no haya un caso de uso tremendamente grande para esto, aparte de lo obvio: necesita un gráfico de trama, entre otras cosas, en un diseño SVG más grande. De esa forma se mueve y escala con el resto de elementos.

La sintaxis es:

<svg ... >
  <image xlink:href="https://css-tricks.com/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>

Probablemente nunca coloque un gráfico de trama en un SVG por sí solo, ya que no tiene ninguna ventaja. Sí, entonces puede aplicar filtros SVG a la imagen, pero puede aplicar filtros SVG a una <img> también. Lo mismo ocurre con los trazados de recorte y las máscaras.

Sin embargo, los filtros pueden parecer ligeramente diferentes, por lo que es bueno tenerlo en cuenta:

Vea los filtros Pen SVG en SVG o IMG de Chris Coyier (@chriscoyier) en CodePen.