Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Svg nie wyświetla się prawidłowo

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Svg nie wyświetla się prawidłowo

Post 19.10.2017, 22:50:49

Witam,
mam problem z obrazkiem svg. U mnie wyświetla się dobrze, ale np. u mojego brata na tej samej przeglądarce wygląda źle..

u mojego brata: link
prawidłowa wersja: link
tutaj link do strony: https://reacttestss.herokuapp.com/

Wniosek taki, że nie czyta czcionki. Pytanie, dlaczego? Robione w inkscape.
XaooBBx
Posty: 55
Dołączył(a): 22.09.2016

Re: Svg nie wyświetla się prawidłowo

Post 19.10.2017, 23:28:40

Masz Open Sans zainstalowane u Ciebie w systemie? Jeśli tak, to masz odpowiedź.
Plik SVG, ma w swoim wnętrzu style, które mówią, że teksty mają bazować na Open Sans. Ale w kodzie obrazka brakuje arkusza stylów, który mówi, gdzie tego fonta można znaleźć. Open Sans wstawione do strony jest niewidoczny dla SVG wstawionego poprzez <img> czy przez CSSowe background-image. Więc przeglądarka będzie szukała tego fonta w systemie. U Ciebie widocznie znalazła, u Twojego brata i u mnie nie, bo nie mamy tych fontów.

Zatem musiałbyś do obrazka wstawić arkusz stylów ze ścieżkami do Open Sans.

Kod: Zaznacz cały
<defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    </style>
  </defs>


Fajnie by było, gdyby to rozwiązywało problem… ale niestety tak dobrze nie jest. SVG wstawiony przez <img> bądź background-image jest oczekiwany jako samodzielny plik, bez zewnętrznych zależności. Zatem import fonta zostanie zignorowany przez niektóre (większość?) przeglądarek. Gdzieś widziałem propozycję, żeby fonta zaszyć bezpośrednio w pliku SVG zakodowanego base64 (data uri)… ale to moim zdaniem jest bezsensowne i lepiej już wyjdzie wstawić starego poczciwego PNG.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19642
Dołączył(a): 14.04.2002

Re: Svg nie wyświetla się prawidłowo

Post 19.10.2017, 23:44:54

Poważnie, jest to aż tak problematyczne? PNG chciałbym ominąć ze względu na słabą jakość na urządzeniach mobilnych... Pozostaje chyba zrobić logo w czystym CSS.. Wielka szkoda.
XaooBBx
Posty: 55
Dołączył(a): 22.09.2016

Re: Svg nie wyświetla się prawidłowo

Post 20.10.2017, 06:26:54

Zapomniało mi się o jednej rzeczy - skonwertuj tekst do ścieżki.
Widzę, że plik utworzony w Inkscape. Tam na 100% masz funkcję konwersji tekstu na ścieżkę. Spodziewam się, że wszystkie dobre edytory SVG mają takie coś wbudowane.
Wtedy nie musisz sie martwić o osadzanie fonta, ponieważ w obrazku nie będzie tekstu, tylko ścieżka kształtem odwzorowująca kształt glyfów wybranego fonta. Chyba, że priorytetem jest, żeby był to tekst... żeby można go zaznaczać, łatwo zmienić, itd.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19642
Dołączył(a): 14.04.2002


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Bing [Bot] i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50677 zarejestrowanych użytkowników.
Najnowszy użytkownik: OQCJacki


Nasi użytkownicy napisali:

  • 936066 wiadomości
  • w 246713 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)