Witam,

Czy i jak można sprawić, aby grafika wektorowa w formacie SVG skalowała się wraz
ze zmianą szerokości okna przeglądarki? Googlowałem na ten temat, ale bez
efektu. Okazuje się, że nawet zwykłe ustawienie (na sztywno) rozmiaru obiektu
SVG nie jest takie proste, a o respondywnym skalowaniu nie znalazłem nic, co by
działało.

A jeśli nie SVG, to może jest inny sposób na uzyskanie pożądanego efektu (tzn.
super ostre logo na całą szerokość strony - niezależnie od urządzeni ai
szerokości strony). Może jakiś <canvas>, ale nie mam pojęcia jak...

Dzięki,

latet

do góry

Dnia Sat, 5 Oct 2013 12:25:05 +0200, Latet napisał(a):

> A jeśli nie SVG, to może jest inny sposób na uzyskanie pożądanego efektu (tzn.
> super ostre logo na całą szerokość strony - niezależnie od urządzeni ai
> szerokości strony). Może jakiś <canvas>, ale nie mam pojęcia jak...

Ale w czym masz konkretnie problem? SVG w <img/> również respektuje
max-width: 100%; height: auto

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

> Ale w czym masz konkretnie problem? SVG w <img/> również respektuje
> max-width: 100%; height: auto

Tak, doszedłem już do tego, testując wiele metod osadzania svg.
Metoda w <img /> jest zdecydowanie najmniej problematyczna.
Z tym, że nie działa poprawnie pod IE: http://www.xyz.avx.pl/svg.php

Dzięki,

latet

do góry

Dnia Sun, 6 Oct 2013 22:50:56 +0200, Latet napisał(a):

>> Ale w czym masz konkretnie problem? SVG w <img/> również respektuje
>> max-width: 100%; height: auto
>
> Tak, doszedłem już do tego, testując wiele metod osadzania svg.
> Metoda w <img /> jest zdecydowanie najmniej problematyczna.
> Z tym, że nie działa poprawnie pod IE: http://www.xyz.avx.pl/svg.php

Dla IE musisz podać wymiary, by potrafił sobie wyliczyć proporcje dla
skalowania. Mogą być mocno przeszacowane, bo i tak szerokość ograniczy
max-width.

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

> Dla IE musisz podać wymiary, by potrafił sobie wyliczyć proporcje dla
> skalowania. Mogą być mocno przeszacowane, bo i tak szerokość ograniczy
> max-width.

Spróbowałem:
<img src="x.svg" style="width:6370px; max-width: 100%; height: auto;">
bez róznicy, tzn. nadal nie działa skalowanie.
http://www.xyz.avx.pl/svg_ie.php

Jak wpisałem też konkretny height, to było rozciągniete w pionie.
Kombinowałem z max-height:100% oraz max-height:auto, ale bez rezultatu.

latet

do góry

Dnia Mon, 7 Oct 2013 01:20:45 +0200, Latet napisał(a):

> Spróbowałem:
> <img src="x.svg" style="width:6370px; max-width: 100%; height: auto;">
> bez róznicy, tzn. nadal nie działa skalowanie.
> http://www.xyz.avx.pl/svg_ie.php

Ewidentnie Inkscape coś miesza i w jakiś sposób narzuca w IE stałe wymiary
(a raczej, znająć życie, IE ma badziewną impementację SVG).

Twój plik wrzucony do Illustratora i zapisany bez zmian skaluje się
poprawnie w IE10. Pokombinuj z opcjami zapisu.

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

> Twój plik wrzucony do Illustratora i zapisany bez zmian skaluje się
> poprawnie w IE10. Pokombinuj z opcjami zapisu.

Nie mam Illustratora, czy mógłybyś tu wkleić początkowy kawałek źródła tego SVG
po zapisaniu Illustratorem? Podejrzewam, że Illustrator po prostu dodał tam
definicję viewBox? To by tłumaczyło poprawne sklowanie pod IE. Testowałem to
(ręcznie dodając viewBox, co nie jest banalne - tzn. dobranie parametrów viewBox
wymagało wielu prób i błędów) o tutaj: http://www.xyz.avx.pl/svg1.php
Niestety, gdy jest określony viewBox, to pojawiają się z kolei problemy pod
Androidami (duży pionowy padding, z którym nie udało się nic zrobić).

Ewentulnie proszę o tego SVG po Illustratorze na adres xyz [wiadome zwierzę] avx
pl

Dziękuję,

latet

do góry

Dnia Mon, 7 Oct 2013 10:13:32 +0200, Latet napisał(a):

>> Twój plik wrzucony do Illustratora i zapisany bez zmian skaluje się
>> poprawnie w IE10. Pokombinuj z opcjami zapisu.
>
> Nie mam Illustratora, czy mógłybyś tu wkleić początkowy kawałek źródła tego SVG
> po zapisaniu Illustratorem? Podejrzewam, że Illustrator po prostu dodał tam
> definicję viewBox?

Zgadza się, jest viewBox. Poeksperymentuję w wolnej chwili z różnymi
parametrami zapisu, bo ma ich dość dużo.

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

Chyba problem rozwiązany. Trzeba było jednak dopisać ten viewBox, z wartościami
jak w width i height (ale je też pozostawić). Opis + screeny są tutaj:
http://www.xyz.avx.pl/svg.php
Great success :)
Dzięki za pomoc,
latet

do góry