SVG는 비트 맵 이미지 임베딩을 지원합니까?
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 의 전체 예 입니다.
여기에 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 변환을 거칩니다.
그러나이 기술에는 단점이 있습니다. 예를 들어 이미지는 브라우저에 의해 캐시되지 않습니다
You can use a data: URL to embed a Base64 encoded version of an image. But it's not very efficient and wouldn't recommend embedding large images. Any reason linking to another file is not feasible?
It is also possible to include bitmaps. I think you also can use transformations on that.
참고URL : https://stackoverflow.com/questions/6249664/does-svg-support-embedding-of-bitmap-images
'IT박스' 카테고리의 다른 글
| Jest SecurityError : 불투명 한 출처에 대해 localStorage를 사용할 수 없습니다 (0) | 2020.06.22 |
|---|---|
| 클래스 내에서 열거 형 선언 (0) | 2020.06.22 |
| catch InterruptException 블록에서 Thread.currentThread.interrupt ()를 호출하는 이유는 무엇입니까? (0) | 2020.06.22 |
| 런타임시 기본 클래스를 확장하는 Java 애플리케이션에서 모든 클래스를 찾으십시오. (0) | 2020.06.21 |
| 인덱스 변수없이 N 번 무언가를하는 pythonic 방법? (0) | 2020.06.21 |