SVG có hỗ trợ nhúng hình ảnh bitmap không?

147

Là một hình ảnh SVG hoàn toàn là véc tơ hoặc chúng ta có thể kết hợp hình ảnh bitmap thành hình ảnh SVG không? Làm thế nào về các biến đổi được áp dụng trên các hình ảnh bitmap (phối cảnh, ánh xạ, v.v.)?

Chỉnh sửa : Hình ảnh có thể được bao gồm trong một SVG bằng cách tham chiếu liên kết. Xem http://www.w3.org/TR/SVG/struct.html#ImageEuity . Câu hỏi của tôi là trong thực tế nếu hình ảnh bitmap có thể được bao gồm bên trong svg để hình ảnh svg sẽ được khép kín. Mặt khác, bất cứ khi nào hình ảnh svg được hiển thị, liên kết phải được theo dõi và hình ảnh được tải xuống. Rõ ràng các tệp .svg chỉ đơn giản là các tệp xml.

image svg bitmapimage

— chmike
nguồn

207

Có, bạn có thể tham khảo bất kỳ hình ảnh từ các <image>yếu tố. Và bạn có thể sử dụng dữ liệu của bạn để làm cho Svg hoàn toàn tự chủ. Một ví dụ:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Các dấu chấm là nơi bạn thêm dữ liệu cơ sở được mã hóa 64, trình chỉnh sửa đồ họa vector hỗ trợ svg thường có tùy chọn lưu với hình ảnh được nhúng. Mặt khác, có rất nhiều công cụ xung quanh để mã hóa đến và từ base64.

Dưới đây là một ví dụ đầy đủ từ testsuite svg.

— Erik Dahlström
nguồn

2

@Aleksandar đó là một câu hỏi riêng biệt và tôi chắc chắn rằng bạn có thể tìm thấy câu trả lời cho câu hỏi này trên trang web này (mã hóa một cái gì đó sang base64 không phải là đặc trưng của Svg).

— Erik Dahlström

1

@Erik - Giả sử tôi có cùng một hình ảnh lặp đi lặp lại hàng ngàn lần trong cùng một tệp svg. Tôi có thể đặt dữ liệu base64 tại một nơi và để hình ảnh tham chiếu đến dữ liệu đó từ đó không?

— Rohit Vats

3

@Erik - Đừng bận tâm tôi đã nhận được câu trả lời của mình từ đây - stackoverflow.com/questions/16685014/iêu . Trả lời nói về việc nhóm ở đó. :)

— Rohit Vats

3

Đừng quên khai báo không gian tên xlinknhư sau: xmlns:xlink="http://www.w3.org/1999/xlink"một số trình duyệt / người xem có thể không thấy hình ảnh của bạn mà không có nó

— Marc_Alx

1

FYI: theo kinh nghiệm của tôi, trình duyệt Chrome sẽ hiển thị hình ảnh này ngay cả khi bạn không chỉ định widthvà heighttrong thẻ hình ảnh svg. Tuy nhiên Firefox và IE không hiển thị hình ảnh nếu bạn bỏ qua các thuộc tính này. Vì vậy, hãy chắc chắn rằng bạn chỉ định chúng!

— Stonecrusher

23

Tôi đã đăng một câu đố ở đây, hiển thị dữ liệu, hình ảnh từ xa và cục bộ được nhúng trong SVG, bên trong trang 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>

— yêu thích
nguồn

17

Bạn có thể sử dụng URI dữ liệu để cung cấp dữ liệu hình ảnh, ví dụ:

<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>

Hình ảnh sẽ đi qua tất cả các biến đổi svg bình thường.

Nhưng kỹ thuật này có nhược điểm, ví dụ hình ảnh sẽ không được trình duyệt lưu vào bộ nhớ cache

— GarethOwen
nguồn

nếu SVG dữ liệu được yêu cầu bởi SVG, thì điều này có lẽ không có bất lợi - tôi sẽ chỉnh sửa câu trả lời của mình

— GarethOwen

Hình ảnh được nhúng (URI dữ liệu) sẽ được lưu trong bộ nhớ cache với tài liệu mà họ đang xem, ví dụ: stackoverflow.com/questions/4791807/data-uris-and-caching

— Erik Dahlström

Chính xác - nếu tài liệu svg thay đổi, bitmap nhúng sẽ được tải lại, ngay cả khi nó giống nhau. Nếu chúng tôi liên kết đến một URL http, điều này có thể được lưu trữ riêng vào tài liệu svg.

— GarethOwen

1

Điểm tốt. Trong nhận xét của tôi cho câu trả lời của Nick, bạn sẽ thấy sự hợp lý của việc nhúng hình ảnh bitmap trong hình ảnh svg. Mặc dù bạn đúng, mã hóa là xấu và không hiệu quả. Nó phải là một tệp mã hóa nhị phân riêng biệt được di chuyển cùng với hình ảnh svg.

— chmike

2

Bạn có thể sử dụng data:URL để nhúng phiên bản được mã hóa Base64 của hình ảnh. Nhưng nó không hiệu quả lắm và không khuyên bạn nên nhúng hình ảnh lớn. Bất kỳ lý do liên kết đến một tập tin khác là không khả thi?

— Nick
nguồn

Nó phụ thuộc vào trường hợp sử dụng. Trường hợp sử dụng mà tôi đang xem xét là nơi một tập tin svg được sao chép và truy cập internet không phải lúc nào cũng có sẵn (ví dụ như danh thiếp). CNTT cũng cho phép giữ cho việc sử dụng thẻ riêng tư. Với một hình ảnh được liên kết, chủ sở hữu của hình ảnh có thể theo dõi tất cả các màn hình thẻ của nó có thể thú vị đối với anh ta nhưng không phải cho chủ thẻ. Hình ảnh Svg tự chứa có ý nghĩa.

— chmike

Điều đó đúng nếu bạn sử dụng một URL tuyệt đối trỏ đến một nơi nào đó trên Internet. Nhưng thật dễ dàng để sử dụng một URL tương đối để nếu tệp SVG là cục bộ, hình ảnh cũng sẽ như vậy. Nếu bạn cũng có yêu cầu rằng nó phải là một tệp có thể phân phối lại, thì điều đó sẽ thay đổi mọi thứ một lần nữa.

— Nick

Có những trường hợp sử dụng mà bạn muốn một đồ họa SVG được chứa trong đó - đó là, MỘT tệp chứa toàn bộ hình ảnh. Phải vận chuyển / lưu trữ nhiều tệp để đảm bảo hình ảnh được hiển thị không phải là một điều tốt khi xử lý hình ảnh trên hệ thống tệp - mọi thứ có thể không đồng bộ hoặc bị mất quá dễ dàng.

— Minok

-1

Nó cũng có thể bao gồm bitmap. Tôi nghĩ bạn cũng có thể sử dụng các biến đổi trên đó.

— hùng mạnh
nguồn

Thật. Tôi vừa tìm thấy liên kết này: w3.org/TR/SVG/struct.html#ImageEuity . Thật không may, nó không trả lời mối quan tâm của tôi mà tôi nhận thấy không được nêu trong câu hỏi. Tôi sẽ chỉnh sửa câu hỏi.

— chmike