Generator placeholderów

Jak używać

1. Ustaw wymiary i wybierz kolory.
2. Wpisz etykietę i dopasuj rozmiar czcionki.
3. Pobierz SVG albo skopiuj data URI i tag img.

O tym narzędziu

Obraz zastępczy nadaje układowi stabilny kształt, zanim będą gotowe zdjęcia, ilustracje lub grafiki produktu. Ten generator tworzy samodzielny SVG na podstawie wymiarów, kolorów, tekstu i rozmiaru czcionki. Ponieważ wynik jest grafiką wektorową, pozostaje ostry przy każdej gęstości ekranu i może być osadzony jako data URI albo pobrany jako mały plik SVG. Ustaw szerokość i wysokość zgodnie z miejscem docelowym, a następnie wybierz kolory z odpowiednim kontrastem. Tekst może wskazywać rozmiar, kategorię zawartości albo tymczasową wiadomość podczas przeglądu projektu. Podgląd zmienia się od razu, a surowy SVG można łatwo obejrzeć i zmodyfikować. Wygenerowany obraz nie wykonuje żądań sieciowych i nadaje się do prototypów, makiet maili, dokumentacji, wireframe’ów, fixture testowych i responsywnych miejsc na zdjęcia. Na małym płótnie używaj krótkich etykiet, ponieważ tekst nie jest automatycznie zawijany. Znaki specjalne są escapowane w tekście SVG, więc nie stają się przypadkowym kodem. Pola kolorów korzystają z natywnego próbnika przeglądarki i zapisują zwykłe wartości szesnastkowe. Pobierz plik, gdy potrzebujesz assetu, albo skopiuj element img do HTML. Przed publikacją zastąp placeholder treścią zgodną z marką i potrzebami dostępności. W gotowym interfejsie sprawdź również kontrast, skalowanie i tekst alternatywny, aby tymczasowa grafika nie pogarszała odbioru strony. Dla responsywnych powierzchni lepiej skaluje się SVG oparte na viewBox bez stałego rozmiaru pikselowego. Przed przekazaniem do CMS sprawdź, czy jego filtr akceptuje Data-URI oraz osadzone kroje pisma.

Najczęstsze pytania

Podobne narzędzia