W grafice wektorowej SGV można dodawać obiekty, które będą wyświetlały określony tekst. Ich ustawianie na stronie odbywa się w identyczny sposób jak każdego innego obiektu. Zmiana stylu wyświetlanego tekstu też jest bardzo wygodna i identyczna z ustaleniem stylu tekstu na dowolnej stronie internetowej. Użycie wielu różnych właściwości stylu pozwala uzyskać efekty jakich w zwykłym programie graficznym byłoby czasochłonne.
Najprostszym obiektem, którego używa się do wyświetlenia tekstu to text. Prawidłowe użycie polega na ustaleniu pozycji na planszy przy użyciu argumentów x i y. Tekst należy umieścić pomiędzy znacznikiem początkowym <text>, a końcowym </text>. Kolor tekstu ustala się przy pomocy atrybutu fill.
Warto zauważyć, że ze względu na umieszczenie kodu SVG na stronie styl wyświetlanego tekstu jest dziedziczony po obiekcie nadrzędnym. Ponadto umieszczenie kodu SVG na stronie umożliwia kopiowanie tekstu co jest niemożliwe jeśli plik graficzny został włączony przez obiekt img.
Problem z ustawianiem tekstu na płótnie polega na tym, że koordynaty x, y wskazuja lewy, dolny róg wyświetlanego tekstu. Przez to należy zrozumieć, że jakakolwiek zmiana rozmiaru tekstu oznacza, że będzie trzeba obiekt przesunąć w pionie. Ponadto nie zawsze można zgadnąć jakiej szerokości będzie tekst na płótnie - zależy to od rozmiaru czcionki oraz jej kroju. Z tego powodu można określić, że szerokość strony jest stała i dostosowany będzie rozmiar tekstu do strony, albo odwrotnie.
Poniższy rysunek pokazuje punkt zaczepienia tekstu oraz obszar jaki tekst zajmuje:
Obiekt text nie posiada atrybutu, który pozwalałby określić tylny kolor obiektu, który reprezentuje tekst. Z tego powodu obszar został zaznaczony poprzez obiekt rect, a punkt zaczepienia tekstu jest wskazywany poprzez czerwoną kropkę.
Przed przejściem do ustalania stylu tekstu należy wiedzieć, że każdy znak jest wyświetlany rysowany oddzielnie. Oznacza to, że styl ustalony dla obiektu text dotyczy każdego znaku oddzielnie.
Do podstawowych atrybutów umożliwiających zmianę sposobu wyświetlenia tekstu to: fill - pozwala ustalić kolor wypełnienie tekstu, ustalenie tego atrybutu odpowiada ustaleniu kolory czcionki w wybranym edytorze tekstu. Ponadto krój i rozmiar czcionki ustala się kolejno atrybutami font-size oraz font-family. Podczas ustalanie rozmiaru tekstu domyślnie jest on podawany w px. Ustalając krój czcionki należy wpisać nazwę czcionki, którą chce się użyć.
Przykładowo w celu wyświetlenia niebieskiego tekstu o rozmiarze 30px wyświetlanego przy pomocy czcionki Courier New:
Wspomniany wcześniej sposób renderowania tekstu oznacza, że każdy znak jest obiektem, który przyjmuje styl określony wewnątrz obiektu text. Oznacza to, że istnieje możliwość wyświetlenie konturów tekstu bez ustalania wypełnienia znaków jakimkolwiek kolorem. Przykładowe zastosowanie tej właściwości można zobaczyć poniżej:
W celu wyróżnienia fragmentów tekstu wewnątrz obiektu text nie ma potrzeby rozbijania tekstu na kilka podtekstów. Styl fragmentu tekstu można zmienić przy pomocy obiektu tspan, którego można używać wewnątrz obiektu text. Przykładowo w poniższym przykładzie wyróżnione zostało słowo fragmentu przy pomocy obiektu tspan:
Tak samo jak w przypadku obiektu text zawartość obiektu ustala się poprzez wpisanie wartości pomiędzy znacznik początkowy i końcowy. Styl ustala się w taki sam sposób jak w obiekcie text. Wszystkie właściwości, które nie zostaną zmienione w stylu obiektu tspan są dziedziczone po obiekcie text.
Przypuśćmy, że istnieje potrzeba zapisania wyrażenia z potęgą. Na podstawie znanych obiektów wstawienie potęgi oznaczałoby dodanie kolejnego obiektu text, który miałby mniejszy rozmiar i byłby ustawiony wyżej. Zadanie to można rozwiązać prościej używając atrybutów dx i dy obiektu tspan. Są to dwa atrybuty, które określają przesunięcie względem miejsca, gdzie dany teksty miałby zostać narysowany. Przesunięcie ma wpływa na dalszą część tekstu. Zapisanie potęgi wyglądałoby następująco:
Tej właściwości obiektu tspan można wykorzystać do tworzenia kilkulinijkowych pól tekstowych. Jednak wtedy w każdej linijce reprezentowanej przez obiekt tspan należy dodać atrybut x, który wyrówna nową linijkę do lewej krawędzi:
Uwaga. W razie wyrównywania tekstu do lewej strony wszystkie obiekty tspan muszą mieć tę samą wartość x co obiekt text tak jak w przykładzie. Ten atrybut jest modyfikowany w trakcie rysowania i nie jest dziedziczony po text.
W celu sprawdzenie wiadomości nabytych podczas czytania artykułów postaraj się uzyskać jak najdokładniejsze kopie poniższych rysunków:
W celu sprawdzenia kodu dowolnego rysunku wystarczy zapisać obrazek np. na pulpicie i otworzyć w edytorze tekstu.
