[image] SVG가 비트 맵 이미지 포함을 지원합니까?

Program / 글쓴이

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 페이지에 게시했습니다.

http://jsfiddle.net/MxHPq/

<!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 인코딩 버전의 이미지를 포함 할 수 있습니다 . 그러나 매우 효율적이지 않으므로 큰 이미지를 포함하지 않는 것이 좋습니다. 다른 파일에 링크 할 수없는 이유가 있습니까?

답변

비트 맵을 포함시킬 수도 있습니다. 나는 당신도 그것에 변형을 사용할 수 있다고 생각합니다.

답변