Osadź obrazy i czcionki w SVG
Dodaj 1 plik SVG oraz wskazane w nim obrazy (PNG, JPEG, WebP, GIF) lub czcionki (TTF, OTF, WOFF, WOFF2) i połącz je w 1 plik SVG, aby nie trzeba było udostępniać zasobów osobno. Wskaż zasób dla każdego odwołania i utwórz plik SVG. Możesz go zapisać, gdy podgląd wyświetli się poprawnie. Zasoby z zewnętrznych adresów URL nie są pobierane automatycznie.
Co możesz zrobić
Połącz obrazy i czcionki
Osadzaj dodane zasoby lokalne w pliku SVG, aby ograniczyć potrzebę osobnego przesyłania zasobów.
Sprawdź odwołania i zasoby
Wskaż plik odpowiadający każdej ścieżce obrazu lub nazwie czcionki w pliku SVG. Plik SVG nie zostanie utworzony, jeśli pozostaną nierozwiązane odwołania.
Sprawdź wygląd utworzonego pliku SVG i zapisz go
Sprawdź wygląd obrazu i zapisz plik SVG z osadzonymi zasobami. Oryginalne pliki nie zostaną nadpisane.
Jak używać
Dodaj plik SVG i zasoby
Wybierz jeden plik SVG oraz obrazy i czcionki, do których się odwołuje. Możesz też dodać je razem z folderu.
Przypisz zasoby do osadzenia
Sprawdź lokalny plik dla każdego odwołania. W przypadku odwołań niedopasowanych automatycznie wybierz spośród już dodanych zasobów.
Utwórz plik SVG
Gdy nie pozostaną nierozwiązane odwołania, naciśnij „Utwórz SVG z obrazami i czcionkami”.
Sprawdź wygląd i zapisz
Przed zapisaniem sprawdź tekst i obrazy w utworzonym podglądzie. Jeśli plik się nie wyświetla, sprawdź oryginalny plik SVG i zasoby.
Przydatne, gdy
Przekaż razem plik SVG i zasoby
Połącz grafikę odwołującą się do obrazów i czcionek w osobnych folderach w jeden plik SVG, który łatwo przekazać dalej.
Sprawdź przyczynę błędnych odwołań
Porównaj wymagane zasoby z dodanymi plikami, a następnie wskaż brakujące obrazy lub czcionki.
Jak działają odwołania i osadzanie
Ścieżki względne i dopasowywanie plików
Odwołania są dopasowywane automatycznie, gdy ścieżka odwołania względem pliku SVG jednoznacznie odpowiada ścieżce dodanego zasobu. Wybierz plik ręcznie, gdy pliki o tej samej nazwie znajdują się w różnych folderach lub gdy kandydaci się pokrywają.
Wskaż plik dla każdej nazwy czcionki
To narzędzie nie pobiera czcionek z urządzenia wyłącznie na podstawie ich nazw w pliku SVG. Dodaj wymagane pliki czcionek i wskaż pasujące pliki.
Zasoby z adresów URL nie są pobierane automatycznie
Nawet jeśli użyto zewnętrznego adresu URL, udostępnij obrazy lub czcionki lokalnie i wskaż je. Na tym ekranie nie można pobierać zasobów z adresów URL.
Osadzanie nie zmniejsza rozmiaru pliku
Umieszczenie danych obrazu w pliku SVG może zwiększyć rozmiar samego pliku. Czcionki są konwertowane do formatu WOFF2 i osadzane. Zoptymalizuj kod SVG za pomocą osobnego narzędzia.
Różnice w sposobie wyświetlania
Podgląd wyświetla plik SVG jako obraz. Nie ma gwarancji, że będzie wyglądał tak samo w każdej aplikacji, dlatego sprawdź też wymagany sposób wyświetlania w miejscu docelowym.
Często zadawane pytania
Co zrobić, jeśli nie można znaleźć zasobu?
Dodaj obrazy lub czcionki, a następnie wskaż je w polu wyboru przy odpowiednim odwołaniu. Automatyczne dopasowanie może nie działać w przypadku różnych folderów, zduplikowanych ścieżek lub zewnętrznych adresów URL.
Z jakich zasobów mogę korzystać?
Obrazy mogą być w formacie PNG, JPEG, WebP lub GIF, a czcionki w formacie TTF, OTF, WOFF lub WOFF2. Pliki SVG wskazuj pojedynczo.
Czy czcionki są wyszukiwane automatycznie?
To narzędzie nie wyszukuje czcionek na urządzeniu ani w internecie wyłącznie na podstawie nazwy czcionki. Dodaj i wybierz plik dostępny lokalnie.
Co dzieje się z już osadzonymi zasobami?
Obrazy i czcionki osadzone jako data URI oraz odwołania # w pliku SVG nie są liczone jako odwołania zewnętrzne. Możesz utworzyć plik SVG, jeśli nie pozostaną nierozwiązane wykryte odwołania.
Co się stanie, gdy dodam zasoby lub wybiorę je ponownie?
Jeśli dodasz tylko zasoby, zostaną dopisane do listy, a wcześniej przypisane zasoby pozostaną. Sprawdź automatyczne dopasowanie, gdy pojawi się więcej kandydatów o tej samej ścieżce. Dane wejściowe zawierające nowy plik SVG zastępują bieżący plik SVG i wszystkie jego zasoby.
Co zrobić, jeśli występują nieobsługiwane odwołania?
Nie można osadzać odwołań do zewnętrznego użycia ani skryptów. Nie można też wczytać plików SVG zawierających importy zewnętrznych arkuszy CSS. Uporządkuj odwołania w aplikacji źródłowej lub innej odpowiedniej aplikacji, zanim wybierzesz plik SVG.
Czy plik SVG będzie mniejszy?
Zmniejszanie rozmiaru pliku nie jest celem tego narzędzia. Dodanie zasobów do pliku SVG może zwiększyć jego rozmiar. Aby uporządkować kod, użyj optymalizacji SVG.
Co zrobić, jeśli utworzonego pliku SVG nie można wyświetlić?
Opcja zapisu nie jest widoczna na tym ekranie, dopóki plik SVG nie wyświetli się poprawnie. Sprawdź oryginalny plik SVG i zasoby, przejrzyj przypisania lub pliki i utwórz go ponownie.
Dane wejściowe i wyniki
- Dane wejściowe
- 1 plik SVG oraz obrazy i czcionki. Dodaj je z plików lub folderów.
- Obrazy
- Oryginalne dane dodanych obrazów są osadzane. Obrazy nie są zmieniane ani kompresowane.
- Czcionki
- Przypisane czcionki są konwertowane do formatu WOFF2 i osadzane.
- Wynik
- original-name-embedded.svg. Plik można zapisać po poprawnym wyświetleniu utworzonego pliku SVG.