Kiedy powinienem używać SVG lub SVGZ do mojej grafiki internetowej?

Z mojego zrozumienia

SVGZ to skompresowany typ pliku SVG. Uwielbiam używać obrazów SVG i mam z nimi duże doświadczenie.

Przez cały czas ich używania nigdy nie miałem grafiki przekraczającej kilkaset kilobajtów.

Używam SVG do responsywnej grafiki podczas tworzenia responsywnych stron internetowych. Używam ich również, ponieważ moim ulubionym stylem projektowania jest grafika wektorowa. Moją najsilniejszą siłą projektową jest ilustrator, szczególnie jeśli chodzi o projektowanie graficzne.

Innym powodem, dla którego chciałbym użyć grafiki SVG, jest łatwość animacji niektórych elementów grafiki, takich jak ręce, nogi itp.

Zwłaszcza elementy tła, takie jak miasto rozciągające się na całą stronę, podczas gdy ja animuję migotanie świateł i tak dalej.

Jeśli plik zostanie skompresowany, czy utraciłby kod SVG, więc nie mogłem go animować?

Czy jest jakiś powód, dla którego powinienem używać SVGZ zamiast samego SVG?

Aktualizacja

Cóż, postanowiłem zrobić SVG i SVGZ, aby zobaczyć, jak działały w sieci, odkąd dowiedziałem się, że moje prace starożytne CS3 mogą uratować SVGZ!

Po przetestowaniu napotkałem bardzo nieoczekiwany problem z typem pliku SVGZ. (Testowane w Chrome, Firefox i IE) Jeśli przejdziesz do bezpośredniego adresu URL obrazu, pojawi się błąd. Zakładam, że nie możesz uzyskać dostępu do kodu SVG na tych typach plików, ale po zrobieniu skrzypce nie wydaje się nawet wyświetlać obrazu.

Czy są one bezużyteczne dla Internetu?

.svg

.svgz

JSFIDDLE

adobe-illustrator website-design vector svg Josh Powell
źródło

Wygląda na to, że może to być częściowo problem z konfiguracją serwera WWW, .svgzktóry można obsłużyć przy użyciu odpowiedniego typu MIME, patrz stackoverflow.com/questions/16725380/svgz-doesnt-display . Osobiście zawsze używam Raphael.js do grafiki SVG / wektorowej w Internecie, ponieważ potrzebuję wsparcia IE8

user56reinstatemonica8

Hmm, dziękuję za bardzo przydatne linki. Czy jest jakiś powód, aby użyć SVGZ? Pomyślałem, że może byłoby miło zmniejszyć rozmiar pliku obrazu. Jestem tylko ciekawy, czy SVGZjest w jakikolwiek sposób przydatny w Internecie, czy naprawdę w jakikolwiek sposób.

Josh Powell,

Jeśli to zadziała, znacznie zmniejszy rozmiar pliku. Może to być przydatne, jeśli używasz interaktywności na czymś złożonym - np. Bardzo szczegółowej mapie świata SVG, którą można powiększać. Te zśrodki kompresję gzip, który jest wykorzystywany do zmniejszania rozmiaru pliku i prawie nic innego.

user56reinstatemonica8,

@JoshPowell: biorąc pod uwagę, że większość serwerów HTTP wysyła zawartość z kompresowaniem gzip, nie widzę celu tego pytania. A w przypadku niektórych serwerów, jeśli nazwiesz swój plik .svg.gz, przeglądarka otrzyma informację, że oryginalny plik nie został skompresowany.

user2284570,

Odpowiedzi:

Obsługa skompresowanego pliku svg będzie się różnić w zależności od przeglądarki, ale należy skonfigurować serwer tak, aby poprawnie oflagował plik svgz z informacją o jego kodowaniu, aby wyraźnie powiedzieć przeglądarce, jak go zdekodować po otrzymaniu.

Odpowiedź serwera dla svgz musi być skonfigurowana tak, aby zawierała „Kodowanie zawartości: gzip”

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

W przypadku serwera WWW Apache można to osiągnąć za pomocą pliku .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Pamiętaj, że niezależnie od tego, czy zapakujesz go w locie, czy też upieczesz przed umieszczeniem go na serwerze, kodowanie zawartości powinno być wskazane. W przypadku takich zasobów myślę, że lepiej jest go wstępnie skompresować. W przeciwnym razie jesz procesor serwera dla każdego żądania pliku. To może nie wydawać się dużo, ale jest to rodzaj problemu z optymalizacją, który obniża np. Amerykańską stronę opieki zdrowotnej.

horatio
źródło

Jeśli Twój serwer lub platforma jest w ogóle inteligentna, przeprowadzanie kompresji jest wysoce zoptymalizowane, ponieważ można je buforować. Z pewnością nie jest to coś, co spowoduje awarię witryny, a co dopiero opieka zdrowotna.gov.

Josh Koenig

To może nie być odpowiedź, której oczekujesz, ale w przypadku Internetu nie jest tak naprawdę konieczne używanie plików SVGZ. Powodem jest to, że plik SVGZ jest po prostu plikiem SVG, który został wstępnie skompresowany.

Nowoczesne serwery internetowe mogą sami zrobić to Gzipping przed podaniem zasobu ( więcej informacji można znaleźć w odpowiedzi na StackOverflow), więc jeśli masz plik SVG o pojemności 300 KB, który po kompresji ma 50 KB, będzie on mniej więcej taki sam, jak automatycznie skompresowany przez serwer WWW. Więc nie będzie to 300 KB w dół linii, będzie to 50 KB, a następnie zostanie nieskompresowane przez przeglądarkę.

Taylor Jasko
źródło

Czy jesteś pewien, że skompresowany plik gdzieś jest buforowany? Dużym wysiłkiem jest gzipowanie tych zasobów SVG wielokrotnie dla 5000 odwiedzających.

bokan

@ bokan: niektóre serwery oferują opcję wstępnej kompresji zawartości przez dodanie rozszerzenia pliku .gz. Jeśli więc klient szuka pliku index.html, serwer odpowie wstępnie skompresowanym plikiem o nazwie index.html.gz.

user2284570,

@ user2284570: Musisz ręcznie utworzyć plik .gz. W przeciwnym razie będzie kompresował pliki za każdym razem, gdy je wyśle, a to dużo pracy dla serwera.

bokan

@bokan: Tak i często wymaga dużo dodatkowej konfiguracji serwera niż prosta kompresja kodowania zawartości. Nawet IE5 obsługuje to. utworzenie skryptu do kompresji wszystkich plików statycznych w katalogu pozostaje proste. W drugim przypadku oszczędza to zarówno miejsce na dysku, jak i przepustowość.

user2284570,