Instrukcja przygotowania ikony SVG w programie Inkscape
Aplikacja akceptuje wyłącznie ikony w rozmiarze 64x64px.
Przygotowanie ikony do symbolizacji(nie szablonu)
Wymagania:
1. Element główny svg musi mieć trzy atrybuty – width, height i viewBox
2. Viewbox musi mieć wartość 0 0 64 64
3. Wartości atrybutów width i height muszą mieć jednostkę px, a więc np. height="64px" zamiast height="64"
Wymagania spełnisz tworzą ikonę według poniższejinstrukcji:
Darmowy program Inkscape https://inkscape.org/release/inkscape-1.2.1/
1. Uruchom Inskcape
2. Określ rozmiar strony oraz ViewBox 64x64px:
Plik -> Właściwości dokumentu
3. Dodatkowo zaznacz opcję szachownica oraz ustaw maksymalną przezroczystość strony
4. Narysuj ikonę korzystając z narzędzi Inkscape
5. Zapisz ikonę: Plik -> zapisz w formacie Inkscape SVG (*.svg)
Przygotowanie ikony-szablon
Ikona mająca zostać szablonem, potrzebuje dodatkowej konfiguracji pliku SVG. Należy określić zwrotem param(). element wewnątrz svg, który, będzie mógł mieć zmieniony kolor.
Zadeklarować wypełnienie można bezpośrednio w środku pliku svg, poprzez param(fill), np. style="fill:param(fill)" lub fill="param(fill)" zamiast wypełnienia faktycznym kolorem.
Jeżeli zostanie skonfigurowany w ten sposób inny atrybut, np. stroke="param(fill)", to w przyszłości możne nastąpić brak kompatybilności ze zmianą np. obrysu.
Podsumowując:
-
Dowolny element wewnątrz svg musi mieć zadeklarowany atrybut wypełnienia zwrotem
param(fill)zamiast faktycznego koloru, np.#ffffff - Przynajmniej jedna taka deklaracja już uznaje ikonę za szablon. Tych deklaracji może być dowolna liczba.
Przykładowy element wewnątrz svg który będzie wypełniany dynamicznym kolorem:
<path fill=”param(fill)” vector-effect=”non-scaling-stroke” transform=” translate(-4, -32)” d=”M 0 0 L 8 0 L 8 64 L 0 64 z” stroke-linecap=”round” />
Przykład zapisu całego pliku svg, kompatybilny z obslugą szablonów:
<svg width=”64px” height=”64px” viewBox=”0 0 64 64″ xmlns=”http://www.w3.org/2000/svg”>
<g clip-path=”url(#clip0_401_2)”>
<path d=”M170.667 0H0V170.667H170.667V0Z” style=”fill:param(fill)”/>
<path d=”M88.0387 88.2141V54.6372C77.7901 54.2695 67.6181 52.7753 57.9581 50.2759C54.2471 62.0746 52.0311 75.1055 51.5751 88.2141H88.0387Z” fill=”white”/>
<path d=”M65.9135 31.1297C64.2795 34.1706 62.7701 37.3912 61.3915 40.7537C69.9538 42.8968 78.9525 44.1898 88.0385 44.5393V7.92584C80.5411 10.6183 72.4355 19.0017 65.9135 31.1297Z” fill=”white”/>
<path d=”M48.3318 47.3892C40.8864 44.8441 33.8644 41.6788 27.4944 37.9482C16.0571 51.7269 8.80044 69.1493 7.70544 88.2143H41.5648C42.0114 73.9912 44.3344 60.0905 48.3318 47.3892Z” fill=”white”/>
<path d=”M51.7212 37.9074C53.3449 33.8734 55.1469 29.9969 57.1262 26.3166C60.3502 20.3195 63.8879 15.1489 67.6275 10.8849C55.1432 14.8149 43.8812 21.5665 34.5702 30.3898C38.9079 32.7856 43.5545 34.9068 48.4309 36.7324C49.5165 37.1387 50.6135 37.5306 51.7212 37.9074Z” fill=”white”/>
</g>
<defs>
<clipPath id=”clip0_401_2″>
<rect width=”64px” height=”64px” fill=”white”/>
</clipPath>
</defs>
</svg>
