SVG 이미지는 순전히 벡터 형식입니까, 비트 맵 이미지를 SVG 이미지로 결합 할 수 있습니까? 비트 맵 이미지 (관점, 매핑 등)에 적용된 변환은 어떻습니까?
편집 : 이미지는 링크 참조로 SVG에 포함될 수 있습니다. http://www.w3.org/TR/SVG/struct.html#ImageElement를 참조 하십시오 . 내 질문은 실제로 svg 이미지가 자체 포함되도록 비트 맵 이미지가 svg 안에 포함될 수 있는지 여부였습니다. 그렇지 않으면 svg 이미지가 표시 될 때마다 링크를 따라 가고 이미지를 다운로드해야합니다. 분명히 .svg 파일은 단순히 xml 파일입니다.
답변:
예, <image>요소의 모든 이미지를 참조 할 수 있습니다 . 그리고 데이터 URI 를 사용하여 svg를 완전히 독립적으로 만들 수 있습니다 . 예를 들면 :
<image width="100" height="100" xlink:href="data:image/png;base64,...">점은 인코딩 된 base64 데이터를 추가하는 위치이며, svg를 지원하는 벡터 그래픽 편집기에는 일반적으로 이미지를 포함하여 저장할 수있는 옵션이 있습니다. 그렇지 않으면 base64로 인코딩하거나 base64에서 인코딩하기위한 많은 도구가 있습니다.
다음 은 svg testsuite 의 전체 예 입니다.
xlink그대로 선언하는 것을 잊지 마십시오 . xmlns:xlink="http://www.w3.org/1999/xlink"일부 브라우저 / 뷰어가 없으면 이미지가 보이지 않을 수 있습니다.
width하고 heightSVG 이미지 태그를. 그러나 이러한 속성을 생략하면 Firefox 및 IE에 이미지가 표시되지 않습니다. 따라서 반드시 지정하십시오!
여기에 SVG에 포함 된 데이터, 원격 및 로컬 이미지를 보여주는 바이올린을 HTML 페이지에 게시했습니다.
<!DOCTYPE html>
<html>
<head>
<title>SVG embedded bitmaps in HTML</title>
<style>
body{
background-color:#999;
color:#666;
padding:10px;
}
h1{
font-weight:normal;
font-size:24px;
margin-top:20px;
color:#000;
}
h2{
font-weight:normal;
font-size:20px;
margin-top:20px;
}
p{
color:#FFF;
}
svg{
margin:20px;
display:block;
height:100px;
}
</style>
</head>
<body>
<h1>SVG embedded bitmaps in HTML</h1>
<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>
<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>
<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>
<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>
</body>
</html>데이터 URI 를 사용 하여 이미지 데이터를 제공 할 수 있습니다 ( 예 :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>이미지는 모든 일반적인 svg 변환을 거칩니다.
그러나이 기술에는 단점이 있습니다. 예를 들어 이미지는 브라우저에 의해 캐시되지 않습니다
data:URL 을 사용하여 Base64 인코딩 버전의 이미지를 포함 할 수 있습니다 . 그러나 매우 효율적이지 않으므로 큰 이미지를 포함하지 않는 것이 좋습니다. 다른 파일에 링크 할 수없는 이유가 있습니까?
비트 맵을 포함시킬 수도 있습니다. 나는 당신도 그것에 변형을 사용할 수 있다고 생각합니다.