Чи підтримує SVG вбудовування растрових зображень?

147

Це зображення SVG суто векторіальне чи ми можемо поєднати растрові зображення у SVG-зображення? Як щодо перетворень, застосованих до растрових зображень (перспектива, відображення тощо)?

Редагувати : зображення можуть бути включені в SVG за посиланням. Дивіться http://www.w3.org/TR/SVG/struct.html#ImageElement . Моє запитання було насправді, якщо растрові зображення можуть бути включені всередині svg, щоб зображення SVG було самостійним. В іншому випадку, кожного разу, коли відображається зображення svg, слід дотримуватися посилання та завантажувати зображення. Мабуть .svg файли - це просто XML-файли.

image svg bitmapimage

— chmike
джерело

207

Так, ви можете посилатися на будь-яке зображення з <image>елемента. І ви можете використовувати дані uri's, щоб SVG повністю міг бути самодостатнім. Приклад:

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

Точки - це те, куди слід додати кодовані дані base64, редактори векторної графіки, що підтримують svg, зазвичай мають можливість збереження із вбудованими зображеннями. В іншому випадку існує багато інструментів для кодування до і від base64.

Ось повний приклад із тестування svg.

— Ерік Дальстрем
джерело

2

@Aleksandar - це окреме питання, і я впевнений, що ви можете знайти відповідь на цьому сайті (кодування чогось до base64 не стосується svg).

— Ерік Дальстрем

1

@Erik - Припустимо, у мене той самий образ повторюється тисячу разів у тому ж SVG-файлі. Чи можу я розмістити дані base64 в одному місці і дозволити зображенню звертатися до цих даних звідти?

— Rohit Vats

3

@Erik - Неважливо, я отримав свою відповідь звідси - stackoverflow.com/questions/16685014/… . Відповідь говорить про групування там. :)

— Rohit Vats

3

Не забудьте оголосити простір імен xlinkтаким, який є: xmlns:xlink="http://www.w3.org/1999/xlink"деякий браузер / глядач може не бачити ваше зображення без нього

— Marc_Alx

1

FYI: згідно з моїм досвідом браузер Chrome відображає це зображення, навіть якщо ви не вказуєте widthта heightв тезі зображення svg. Однак Firefox та IE не відображають зображення, якщо ви не опускаєте ці атрибути. Тож переконайтесь, що ви їх вказали!

— Stonecrusher

23

Тут я розмістив загадку, де відображаються дані, віддалені та локальні зображення, вбудовані у 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>

— Давестеварт
джерело

17

Ви можете використовувати 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.

Але ця методика має недоліки, наприклад, браузер не буде кешувати зображення

— ГаретОвен
джерело

якщо SVG потрібен URI даних, то це, мабуть, не є недоліком - я відредагую свою відповідь

— GarethOwen

Вбудовані зображення (URIs даних) кешуються з документом , в якій вони перебувають, дивись , наприклад , stackoverflow.com/questions/4791807/data-uris-and-caching

— Ерік Dahlström

Саме так - якщо документ svg зміниться, вбудована растрова карта буде перезавантажена, навіть коли вона однакова. Якщо ми посилаємося на URL-адресу http, це може бути кешовано окремо до документа SVG.

— GarethOwen

1

Гарна думка. У моєму коментарі до відповіді Ніка ви побачите раціональність вбудовування растрових зображень у зображення svg. Хоча ви праві, кодування є поганим та неефективним. Це повинен бути окремий двійковий кодований файл, переміщений разом із зображенням svg.

— chmike

2

Ви можете використовувати data:URL-адресу для вбудовування кодованої версії зображення Base64. Але це не дуже ефективно і не рекомендує вбудовувати великі зображення. Будь-яка причина, посилання на інший файл неможлива?

— Нік
джерело

Це залежить від випадку використання. Я розглядаю випадок використання, де копіюється файл svg, і доступ до Інтернету не завжди доступний (тобто візитна картка). ІТ також дозволяє зберегти використання картки приватним. За допомогою пов’язаного зображення власник зображення може відслідковувати всі відображення його карт, що може бути цікавим для нього, але не для власника картки. Самостійне зображення SVG має сенс.

— chmike

Це вірно, якщо ви використовуєте абсолютну URL-адресу, яка вказує десь в Інтернеті. Але легко використовувати відносну URL-адресу, так що якщо файл SVG локальний, зображення буде занадто. Якщо ви також маєте вимогу, що це повинен бути один єдиний перерозподілений файл, то це знову змінить речі.

— Нік

Існують випадки використання, коли ви хочете, щоб SVG-графіка містилася самостійно - тобто ОДИН файл, який містить все зображення. Перевезення / зберігання декількох файлів для забезпечення відображення зображення не є хорошою справою при обробці зображень у файлових системах.

— Мінок

-1

Також можливо включити растрові карти. Я думаю, що ви також можете використовувати перетворення на цьому.

— можливопозволити
джерело

Справді. Я щойно знайшов це посилання: w3.org/TR/SVG/struct.html#ImageElement . На жаль, це не відповідає моєму занепокоєнню, яке я помітив, не зазначено в питанні. Я відредагую питання.

— chmike