﻿<?xml version='1.0' encoding='utf-8' ?>
<?xml-stylesheet type="text/xsl" href="header_p.xsl" ?>
<body PageTitle="Svgtex - skróty XML" PageHeader="Książki i poradniki" Created="2010-03-23" Updated="2010-03-23">
<div>
<span><b>Skróty XML</b> to nieduże pliki, które można wskazywać wtyczce
<b>svgtex</b> zamiast plików SVG. Pozwalają na komponowanie ze źródłowych plików SVG
różnych dodatkowych efektów. Do zrozumienia tej sekcji przydatna jest
podstawowa znajomość składni XML. Informacje na ten temat znajdziesz choćby w
Wikipedii: <a href="http://pl.wikipedia.org/wiki/XML" title="artykuł o XML">po polsku</a>, lub trochę więcej
<a href="http://en.wikipedia.org/wiki/XML" title="artykuł o XML">po angielsku</a>. 
Nawet ubogi opis XML w wersji polskiej wystarczy aż nadto. Najważniejsze, abyś w tych 
artykułach przyjrzał się przykładom.
</span>
<p/>
Jeżeli chcesz powtórzyć operacje pokazane poniżej, pobierz
<br/>
<a href="downloads/p40b.zip" title="model, wykorzystywany w tym i następnym przykładzie">przykładowy model</a> — model P-40B, wraz z teksturami, używany w tym tekście (ten sam, który jest używany w podstawowym opisie wtyczki svgtex);
<p/>
</div>
<div class="subheader">1. Najprostszy przykład</div>
<div>
<span>Zacznijmy od prostego przykładu: czy pamiętasz z <a href="scripts-svgtex1_p.xml" title="pierwsza część opisu svgtex">opisie parametrów svgtex</a>, 
że w panelu <b>Plugin</b> ścieżka do pliku <em>*.svg</em> nie może przekroczyć 63 znaków? 
Aby użyć dłuższych ścieżek, wystarczy stworzyć gdzieś w pobliżu aktualnego pliku Blendera plik 
<em>*.xml</em>, pełniący rolę „skrótu” . Jego zawartość powinna mieć taką strukturę, jaką 
pokazuje <b>Fig. 1.1</b>:
</span>
<br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<A href="images/scripts/svgtex2/image11.xml" target="_blank" title="kliknij, bo otworzyć ten plik XML">
				<IMG src="images/scripts/svgtex2/image11_p.png" align="right"/>
			</A>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 1.1 Prosty skrót XML do pliku <em>*.svg</em>, pozwalający wpisać ścieżki dłuższe niż 63 znaki</spanl></td>
	</tr>
</table>
<p/>
</div>
<div>
<span>Wszystkie elementy tego XML-a koniecznie poprzedzaj
przedrostkiem (tzw. przestrzenią nazw) <b>tex:</b>, bo inaczej plik nie zostanie
poprawnie zinterpretowany. Element główny — <b>tex:texture</b> — jest zawsze taki sam.
W środku jest tylko prosty odnośnik <b>tex:src</b>. W wartość jego atrybutu — <b>path</b> —
wpisz pełną ścieżkę do pliku obrazu. W tym miejscu może mieć do 1024 znaków,
więc na pewno każda się zmieści!</span><br/>
<span>Nadaj temu plikowi nazwę <em>nor_details.xml</em>. Umieść go w tym
samym folderze, co plik <em>*.blend</em>. Gdy wpiszesz nazwę <em>nor_details.xml</em> 
w pole <b>File
name</b> wtyczki, w oknie podglądu powinna się pojawić miniatura pliku <em>skin.svg</em>
(<b>Fig. 1.2</b>). To dowód, że skrót działa poprawnie:</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image12_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 1.2. Zastosowanie skrótu <em>nor_details.xml</em></spanl></td>
	</tr>
</table>
</div>
<div class="subheader">2. Pliki SVG jako biblioteki obrazów</div>
<div>
<span>Prawie wszystkie rastrowe tekstury modelu P-40, który służy
nam tu jako przykład, powstały na podstawie jakiejś kompozycji warstw z pliku
<em>skin.svg</em>. Wiele z tych warstw zostało użytych w więcej niż jednej teksturze.
Dla ilustracji, przyjrzyjmy się teksturze <b>B.Skin.Holes</b>. Jest to tekstura
otworów, która, po włączeniu przejrzystości materiału, może służyć do
rzeczywistego „wycinania dziur” w powłokach modelu. <b>B.Skin.Holes</b> używa
rastrowego pliku <em>holes.png</em>, który został skomponowany z dwóch warstw <em>skin.svg</em>:
<b>Holes</b> i <b>Bkg-White</b> (<b>Fig. 2.1</b>). Rezultat tej kompozycji wyeksportowałem z
Inkscape do pliku rastrowego:</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image21_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 2.1 Kompozycja obrazu otworów w samolocie: warstwa <b>Holes</b> + <b>Bkg-White</b></spanl></td>
	</tr>
</table>
<p/>
<small>Dla ilustracji (<b>Fig. 2.1</b>) dodatkowo włączyłem widoczność
pomocniczej warstwy UV, abyś mógł zobaczyć otwory na tle rozwinięcia siatki
modelu — wtedy ich położenie i rozmiar stają się bardziej zrozumiałe.</small>
<p/>
<span>Z tego samego pliku <em>skin.svg</em> pochodzi obraz podstawowej
tekstury nierówności modelu — <em>nor_details.png</em>. W jego skład wchodziło tyle
warstw z tak różnymi ustawieniami przejrzystości, że zdecydowałem się najpierw
utworzyć w <em>skin.svg</em> specjalną warstwę „zbiorczą”, na której klony warstw
składowych są już poprawnie ustawione: <b>Result:Nor-Details</b>. Rastrowy obraz
<em>nor_details.png</em> uzyskuję z kompozycji <b>Result:Nor-Details</b> i <b>Bkg-Grey</b> (<b>Fig. 2.2</b>):
</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image22_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 2.2 Kompozycja mapy nierówności: warstwa <b>Result:Nor-Details</b> + <b>Bkg-Grey</b></spanl></td>
	</tr>
</table>
<p>Plik <em>skin.svg</em> z taką widocznością warstw, jaką pokazuje <b>Fig.
2.2</b> wykorzystaliśmy w poprzednim przykładzie (por. podgląd tekstury na <b>Fig.
1.2</b>).</p>
<span>Skróty xml pozwalają wykorzystać pliki <em>*.svg</em> jako coś w
rodzaju „biblioteki obrazów”. Ten sam plik <em>skin.svg</em>, użyty w poprzednim
przykładzie jako obraz tekstury nierówności (<b>B.Skin.Nor-Details</b> — por. <b>Fig. 1.2</b>),
wykorzystamy teraz, bez żadnych zmian, do tekstury otworów (<b>B.Skin.Holes</b>). <b>Fig.
2.3</b> pokazuje zawartość skrótu <em>holes.xml</em>, który to umożliwia:</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<A href="images/scripts/svgtex2/image23.xml" target="_blank" title="kliknij, bo otworzyć ten plik XML">
				<IMG src="images/scripts/svgtex2/image23_p.png" align="right"/>
			</A>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 2.3 Skrót XML, przełączający widoczność warstw źródłowego pliku SVG.</spanl></td>
	</tr>
</table>
<p>W stosunku do poprzedniego przykładu (por. <b>Fig. 1.1</b>),
element <b>tex:src</b> został tu rozbudowany o kilka elementów <b>tex:override</b>. 
Zadaniem <b>tex:src</b> jest wskazanie pliku <em>*.svg</em>, który ma być wyświetlony 
(służy do tego atrybut <b>path</b>). Do wnętrza <b>tex:src</b> można wstawić elementy 
<b>tex:override</b>. Każdy z nich służy do zmiany właściwości jakiegoś obiektu w pliku SVG 
(wskazywanym przez <b>tex:src</b>). O tym, o który konkretnie obiekt chodzi, informuje 
atrybut <b>for</b>.
Jego wartością jest identyfikator „celu zmian”. W przykładzie pokazywanym przez
<b>Fig. 2.3</b>, pierwsze dwa elementy <b>tex:override</b> wyłączają widoczność
(<em>display=”none”</em>) warstw <b>Bkg-Grey</b> i <b>Ref:Nor-Details</b>. 
Musimy to zrobić, bo te warstwy są w oryginalnym <em>skin.svg</em> włączone 
(używamy ich w teksturze <b>B.Skin.Nor-Details</b>). Kolejne dwa elementy 
<b>tex:override</b> służą do włączenia widoczności (<em>display=”inline”</em>) 
warstw potrzebnych do tekstury otworów: <b>Bkg-White</b> i <b>Holes</b>. Propagowanie 
tych zmian na elementy potomne warstw jest
wyłączne (<em>propagate=”none”</em>) - wystarczy zmienić widoczność samej warstwy, nie
ma potrzeby zmieniać tego ustawienia dla obiektów, które zawiera.</p>
<span><b>Fig. 2.4</b> przedstawia rezultat zastosowania skrótu <em>holes.xml</em>:</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image24_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 2.4. Zawartość pliku skin.svg, „widziana” poprzez skrót <em>holes.xml</em></spanl></td>
	</tr>
</table>
<p/>
<span>Wszystko pięknie, ale zapewne zapytasz, Uważny Czytelniku,
skąd wiem, że identyfikator warstwy <b>Bkg-Grey</b> to <em>„layer5”</em>, a <b>Result:Nor-Details</b>
to <em>„layer19”</em> (por. <b>Fig. 2.3</b>)? Otóż to można wyszukać w treści pliku SVG (<b>Fig.
2.5</b>):</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image25_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 2.5 Wyszukiwanie w pliku SVG <b>id</b> warstwy o znanej nazwie</spanl></td>
	</tr>
</table>
<p/>
<span>Otwórz plik <em>*.svg</em> w przeglądarce internetowej (np. Firefox),
otwórz menu kontekstowe, i wybierz polecenie <b>Pokaż źródło strony</b>. W oknie,
które się pojawi, naciśnij <b>Ctrl-F</b> (<em>Find</em>), i wyszukaj warstwę po nazwie 
(<b>Fig. 2.5b</b>). Identyfikator obiektu SVG to wartość jego atrybutu <b>id</b>.</span>
</div>
<div class="subheader">3. Opis formatu skrótów XML</div>
<div>
<li>
<big><b>tex:texture</b></big> musi być elementem głównym (<em>root element</em>) pliku (<b>Fig. 1.1</b>). 
Poza definicją przedrostka (inaczej mówiąc: przestrzeni nazw — <em>namespace</em>) <em>tex:</em>,
<b>tex:texture</b> nie posiada żadnych atrybutów. Może zawierać jeden lub więcej elementów <b>tex:src</b>. 
Oprócz nich może zawierać także, o ile jest to potrzebne, inne elementy przewidziane przez 
format SVG. Ich nazwy nie mogą mieć przedrostka <b>tex:</b>.
</li>
<li>
<big><b>tex:src</b></big> wskazuje na plik SVG, który należy narysować. Pełna ścieżkę do tego 
pliku jest wartością atrybutu <b>path</b> (max długość — 1024 znaków). Element <b>tex:src</b> 
może (ale nie musi!) zawierać elementy <b>tex:override</b>.
</li>
<li>
<big><b>tex:override</b></big> zmienia właściwości (atrybuty) wybranego elementu pliku SVG. 
(Tego pliku, który wskazuje jego „rodzic”: element <b>tex:src</b>). Identyfikator (<b>id</b>) 
zmienianego elementu jest podawany w obowiązkowej wartości <b>for</b>. Oprócz tego <b>tex:override</b> 
powinien podawać jakieś atrybuty SVG, które ulegają zmianie (np. <b>display</b>). 
Wreszcie wartość <b>propagate</b> określa zakres („głębokość”) wprowadzanych zmian. 
Jeżeli <b>propagate</b>=”<em>none</em>”, zmiana atrybutów dotyczy wyłącznie „celu” 
(obiektu wskazywanego przez <b>for</b>). Jeżeli <b>propagate</b>=”<em>all</em>”, 
zmiana jest dodatkowo przenoszona na wszystkie elementy zawarte wewnątrz „celu”. 
</li>
</div>
<div>
<p/>
<span>
W elemencie <b>tex:override</b> mogą wystąpić w zasadzie wszystkie elementy stylu rysowania, 
które przewiduje <a href="http://www.w3.org/TR/SVG11" title="specyfikacja na oficjalnych stronach w3.org">specyfikacja SVG</a>. 
Poniżej wyliczam te atrybuty, których zmiana może Ci się najczęściej przydać:
</span><br/>
<ul>
<li><b>display</b>: widoczność elementu (gdy <em>display=”inline”</em> jest widoczny, a <em>display=”none”</em> niewidoczny);</li>
<li><b>opacity</b>: ogólna nieprzejrzystość  elementu — liczba od 0.0 do 1.0. Np. <em>opacity=”0.5”</em> oznacza 50% przejrzystości;</li>
<li><b>fill</b>: barwa wypełnienia (np. <em>fill=”#080808”</em> wypełnia szarością o 50% czerni); 
Można tu także użyć odsyłacza do gradientu lub wzoru (<em>pattern</em>) — patrz specyfikacja SVG;</li>
<li><b>fill-opacity</b>: nieprzejrzystość wypełnienia — liczba od 0.0 do 1.0, np. <em>fill-opacity=”0.6”</em> 
oznacza wypełnienie w 40% przejrzyste;</li>
<li><b>stroke</b>: barwa konturu (np. <em>stroke=”#080000”</em> oznacza kontur ciemnoczerwony);</li>
<li><b>stroke-opacity</b>: nieprzejrzystość konturu — liczba od 0.0 do 1.0;</li>
<li><b>stroke-width</b>: szerokość konturu — jakaś liczba dodatnia;</li>
<li><b>stroke-dasharray</b>: referencja do wzoru kreskowania linii (szczegóły — patrz specyfikacja SVG);</li>
<li><b>font</b>: specyfikacja czcionki (używana w elementach tekstowych); Szczegóły — patrz specyfikacja SVG;</li>
<li><b>font-size</b>: rozmiar czcionki (używany w elementach tekstowych); Szczegóły — patrz specyfikacja SVG;</li>
<li><b>filter</b>: referencja do definicji filtru; Szczegóły — patrz specyfikacja SVG;</li>
<li><b>mask</b>: referencja do definicji maski; Szczegóły — patrz specyfikacja SVG;</li>
<li><b>clip-path</b>: referencja do obszaru, „obcinającego” rysunek; Szczegóły — patrz specyfikacja SVG;</li>
</ul>
<p/>
<span><b>Fig. 3.1</b> przedstawia przykład zaawansowanego skrótu dla
svgtex, w którym wykorzystałem wiele spośród wyliczonych powyżej reguł. (Nazwy
plików SVG: <em>t.svg</em> i <em>w.svg</em> są wymyślone i nie ma ich wśród danych przykładowych.
To tylko ilustracja pewnych możliwości składni):</span><br/>
<table cellSpacing="0" cellPadding="0pt" align="center">
	<tr align="center" valign="top">
		<td>
			<IMG src="images/scripts/svgtex2/image31_p.png" align="right"/>
		</td>
	</tr>
	<tr align="center" valign="top" >
		<td><spanl>Fig. 3.1 Przykład bardziej złożonego pliku skrótu</spanl></td>
	</tr>
</table>
<p>W przykładzie stworzyłem kompozycję, nakładając na rysunek
<em>t.svg</em> obraz <em>w.svg</em>. (To przykład wielokrotnego zastosowania elementu 
<b>tex:src</b>).
Dodatkowo zdefiniowane jest tu (wewnątrz grupy <b>defs</b>) efekt gaussowskiego
rozmycia. (Jest to element SVG typu <b>filter</b>, o identyfikatorze ”<b>Blur3</b>”). Ten
efekt zastosowałem do „rozmycia” obrazu <em>t.svg</em>, nadpisując domyślny filtr
(wyrażeniem <em>filter=”#Blur3”</em>). Zwróć uwagę, że komponent <b>tex:override</b>, 
w którym umieściłem ten atrybut <b>filter</b>, wskazuje w for jako „cel” własnego „rodzica”
(element <b>tex:src</b> o identyfikatorze <b>t</b>). Takie „sztuczki” także są dopuszczalne!
</p>
<p>Uff, jeżeli, drogi Czytelniku, dotarłeś aż do tego miejsca,
to znaczy że jesteś programistą lub przynajmniej masz zadatki na programistę!
Nie chciałbyś może napisać w Pythonie jakiegoś przyjemnego, okienkowego
„klikadełka”, które ułatwiłoby szerokim masom tworzenie własnych skrótów xml?
Biblioteki do przetwarzania xml masz w standardzie Pythona, a jakieś środowisko
„okienkowe” także się znajdzie. Ja sam nigdy nie mogłem na to znaleźć czasu, bo,
jak już o tym wspominałem, tworzyłem ten komponent głównie na własne
potrzeby</p>
</div>
</body>
