Elemento de Imagem <image> no SVG

O elemento <image> do SVG é usado para incorporar imagens bitmap dentro da imagem SVG. Dessa forma, você pode desenhar acima ou ao lado da imagem bitmap. O software de conversão de formato de imagem SVG suporta formatos JPEG e PNG; dentro do SVG, o elemento image também pode incorporar qualquer imagem raster. Dentro das imagens raster, você pode usar os filtros, máscaras, rotação, recorte e todas as outras ferramentas do SVG.

Exemplo de imagem SVG

Este é um exemplo de imagem SVG:

　　　　<svg　width="500"　height="160">
　　　　　　　　<rect　x="10"　y="10"　height="130"　width="500"　style="fill:　#000000"></rect>
　　　　　　　　<image　x="20"　y="20"　width="300"　height="80"　xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image　x="20"　y="20"　xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line　x1="25"　y1="80"　x2="350"　y2="80"></line>
　　　　</svg>

Efeito da imagem após a execução:

Primeiro, desenhar um retângulo preto. Em seguida, meu logotipo é desenhado na parte superior do retângulo preto. Por fim, uma linha branca é desenhada na parte superior da minha imagem e do retângulo preto.

A ordem dos elementos SVG listados no arquivo é a ordem de desenho. O elemento subsequente é desenhado sobre o elemento anterior.

Você também pode usar o elemento <image> para embedding outras imagens SVG. Não precisa ser uma imagem bitmap.

Exemplo de Rotação de Imagem:

<svg　width="500"　height="160">
<image　x="90"　y="-65"　width="100"　height="146"　transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

Explicação de Uso:

• width e height definem a largura e a altura da imagem.

• xlink：href define o link da imagem.

O efeito de execução final é o seguinte: