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

Odpowiedzi:

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