Czy SVG obsługuje osadzanie obrazów bitmapowych?

147

Czy obraz SVG jest czysto wektorowy, czy też możemy połączyć obrazy bitmapowe w obraz SVG? A co z transformacjami zastosowanymi w obrazach bitmapowych (perspektywa, odwzorowania itp.)?

Edycja : obrazy mogą być dołączane do pliku SVG poprzez odnośnik do linku. Zobacz http://www.w3.org/TR/SVG/struct.html#ImageElement . Moje pytanie dotyczyło w istocie tego, czy obrazy bitmapowe mogą być zawarte w pliku svg, aby obraz svg był samowystarczalny. W przeciwnym razie za każdym razem, gdy wyświetlany jest obraz svg, należy skorzystać z łącza i pobrać obraz. Najwyraźniej pliki .svg to po prostu pliki xml.

image svg bitmapimage

— chmike
źródło

207

Tak, możesz odwołać się do dowolnego obrazu z <image>elementu. Możesz też użyć danych URI, aby plik SVG był w pełni samowystarczalny. Przykład:

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

Kropki to miejsce, w którym dodajesz zakodowane dane base64, edytory grafiki wektorowej obsługujące svg zwykle mają opcję zapisywania z osadzonymi obrazami. W przeciwnym razie istnieje wiele narzędzi do kodowania do iz base64.

Oto pełny przykład z zestawu testowego SVG.

— Erik Dahlström
źródło

2

@Aleksandar to osobne pytanie i jestem pewien, że możesz znaleźć na nie odpowiedź na tej stronie (kodowanie czegoś do base64 nie jest specyficzne dla svg).

— Erik Dahlström

1

@Erik - Załóżmy, że mam ten sam obraz powtórzony tysiąc razy w tym samym pliku SVG. Czy mogę umieścić dane base64 w jednym miejscu i pozwolić obrazowi odwoływać się do tych danych?

— Rohit Vats

3

@Erik - Nieważne, że dostałem stąd odpowiedź - stackoverflow.com/questions/16685014/… . Odpowiedz mówi o zgrupowaniu tam. :)

— Rohit Vats

3

Nie zapomnij zadeklarować nazw xlinkjak: xmlns:xlink="http://www.w3.org/1999/xlink"niektóre przeglądarki / widz nie może zobaczyć swoje zdjęcie bez niego

— Marc_Alx

1

FYI: według mojego doświadczenia wynika, że przeglądarka Chrome wyświetla obraz nawet jeśli nie podasz widthi heightw tagu SVG obrazu. Jednak Firefox i IE nie wyświetlają obrazu, jeśli pominiesz te atrybuty. Więc upewnij się, że je określisz!

— Stonecrusher

23

Wrzuciłem tutaj skrzypce, pokazujące dane, zdalne i lokalne obrazy osadzone w SVG, na stronie 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>

— davestewart
źródło

17

Możesz użyć identyfikatora URI danych, aby dostarczyć dane obrazu, na przykład:

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

Obraz przejdzie przez wszystkie normalne transformacje svg.

Ale ta technika ma wady, na przykład obraz nie będzie buforowany przez przeglądarkę

— GarethOwen
źródło

jeśli SVG wymaga URI danych, to prawdopodobnie nie jest to wada

— edytuję

Osadzone obrazy (identyfikatory URI danych) zostaną zapisane w pamięci podręcznej wraz z dokumentem, w którym się znajdują, patrz np. Stackoverflow.com/questions/4791807/data-uris-and-caching

— Erik Dahlström

Dokładnie - jeśli dokument svg ulegnie zmianie, osadzona bitmapa zostanie ponownie załadowana, nawet jeśli jest taka sama. Jeśli łączymy się z adresem URL http, można go buforować oddzielnie w dokumencie svg.

— GarethOwen

1

Słuszna uwaga. W moim komentarzu do odpowiedzi Nicka zobaczysz racjonalne uzasadnienie osadzania obrazu bitmapy w obrazie svg. Chociaż masz rację, kodowanie jest złe i nieefektywne. Powinien to być oddzielny plik zakodowany w formacie binarnym przenoszony wraz z obrazem svg.

— chmike

2

Możesz użyć data:adresu URL, aby osadzić wersję obrazu zakodowaną w standardzie Base64. Ale nie jest to zbyt wydajne i nie zaleca osadzania dużych obrazów. Czy jest jakiś powód, dla którego link do innego pliku jest niemożliwy?

— Nacięcie
źródło

To zależy od przypadku użycia. Przypadek użycia, który rozważam, to taki, w którym kopiowany jest plik SVG, a dostęp do Internetu nie zawsze jest dostępny (np. Wizytówka). Pozwala również na zachowanie prywatności korzystania z karty. Dzięki powiązanemu obrazowi właściciel obrazu może śledzić wszystkie wyświetlenia swoich kart, które mogą być dla niego interesujące, ale nie dla posiadacza karty. Samodzielny obraz SVG ma sens.

— chmike

To prawda, jeśli używasz bezwzględnego adresu URL wskazującego gdzieś w Internecie. Ale łatwo jest użyć względnego adresu URL, więc jeśli plik SVG jest lokalny, obraz też będzie. Jeśli wymagasz również, aby był to pojedynczy plik redystrybucyjny, to znowu wszystko zmienia.

— Nick,

Istnieją przypadki użycia, w których chcesz, aby grafika SVG była samodzielna - to znaczy JEDEN plik zawierający cały obraz. Konieczność transportowania / przechowywania wielu plików w celu zapewnienia renderowania obrazu nie jest dobrą rzeczą podczas obsługi obrazów w systemach plików - rzeczy mogą stracić synchronizację lub zbyt łatwo zostać upuszczone.

— Minok,

-1

Możliwe jest również dołączenie bitmap. Myślę, że możesz również użyć do tego transformacji.

— potężny pług
źródło

W rzeczy samej. Właśnie znalazłem ten link: w3.org/TR/SVG/struct.html#ImageElement . Niestety nie odpowiada to na moje obawy, które zauważyłem, nie są zawarte w pytaniu. Zmienię pytanie.

— chmike