Zmiana zdjęcia w object data wraz ze zmianą rozdzielczości ekranu

Question

Cześć,

 

Czy może mi ktoś doradzić jak podmieniać url w atrybucie object[data] jeżeli zmienię rozdzielczość

 

Dla ekranów w których rozdzielczość jest większa od 1024 mam tak zapisany kod

<object type="image/svg+xml" data="./images/large.svg" style="pointer-events: none;" >
     Twoja przeglądarka nie obsługuje SVG
</object>

a jak podmieniać url w atrybucie data jeżeli dla małych ekranów chcę mieć

data="./images/small.svg"

 

Z góry dziękuję za wszelką pomoc

Comments

Może nie do końca w temacie.

Do I use <img>, <object>, or <embed> for SVG files?
The Best Way to Embed SVG on HTML (2021)

Answer 1

A czemu stosujesz object do wstawiania SVG? O wiele prościej byłoby to osiągnąć przy pomocy np. picture:

<picture>
    <source srcset="male.svg" media="(max-width: 600px)">
    <img src="normalne.svg" alt="Opis">
</picture>

Picture ma też tę zaletę, że można dodać tekst alternatywny do obrazka, co jest niezwykle istotne z punktu widzenia dostępności.

Ogólnie, jeśli nie ma takiej potrzeby (a w większości przypadków nie ma), do wstawiania SVG o wiele lepiej stosować picture/img albo element svg.

Comments

Tylko że to SVG jest z animacją więc wpisując ten kod co przesłałeś nie odczytuje mi żadnego SVG :(

---

Ok, a próbowałeś wstawić inline SVG? Czyli po prostu do pliku HTML wpakować te pliki SVG w elementy svg? IMO wciąż jest to lepsze niż object.

Niemniej tak, animacje to jeden z tych przykładów, gdzie object zadziała lepiej (czy też w ogóle). W tym wypadku są dwie możliwości:

1. posiadanie dwóch object w kodzie i po prostu ukrywanie ich w zależności od rozdzielczości. Można to wykonać przy pomocy media queries.
2. podmiana dynamicznie atrybutu [data] przy pomocy JS-a. Aktualną szerokość viewportu można wykryć przy pomocy matchMedia.