eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwResponsywne auto-skalowanie SVG - da się?
Ilość wypowiedzi w tym wątku: 9

  • 1. Data: 2013-10-05 12:25:05
    Temat: Responsywne auto-skalowanie SVG - da się?
    Od: "Latet" <l...@l...pl>

    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



  • 2. Data: 2013-10-05 17:42:07
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    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


  • 3. Data: 2013-10-06 22:50:56
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: "Latet" <l...@l...pl>

    > 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




  • 4. Data: 2013-10-06 23:38:57
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    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


  • 5. Data: 2013-10-07 01:20:45
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: "Latet" <l...@l...pl>

    > 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







  • 6. Data: 2013-10-07 02:42:58
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    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


  • 7. Data: 2013-10-07 10:13:32
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: "Latet" <l...@l...pl>

    > 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


  • 8. Data: 2013-10-07 11:17:23
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    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


  • 9. Data: 2013-10-08 17:12:48
    Temat: Re: Responsywne auto-skalowanie SVG - da się?
    Od: "Latet" <l...@l...pl>

    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


strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: