Promotic

SVG opis składni

Następujący opis SVG jest przeznaczony dla projektantów, którzy chcą specjalizować się w wytwarzaniu grafiki SVG. Dla zwykłych projektantów systemu PROMOTIC taka znajomość jednak nie jest konieczna, ponieważ tacy użytkownicy mogą stosować albo obrazki dostarczane w systemie PROMOTIC (w folderze \Promotic\PmVXXYY\Resource\Img) lub obrazki takie wytwarzać przy pomocy edytorów SVG.

SVG posiada strukturę podobną do formatu HTML, lecz ze specyficznymi elementami graficznymi. Składnia umożliwia różne sposoby zapisu: można zastosować spacji lub przecinka separatora, właściwości tagów można wprowadzić w parametrach lub stylach CSS.
W następujących przykładach jest zastosowana następująca składnia:
- właściwości tagu są przedstawione w jego parametrach
- separatorem pomiędzy współrzędnymi jest spacja
- separatorem dziesiętnym jest kropka
- do wprowadzania koloru jest wykorzystany zapis w układzie szesnastkowym


1. Struktura SVG i kształty wektorowe

W SVG są zdefiniowane następujące obiekty graficzne:
- rectangle: Prostokąt (z możliwością zaokrąglenia rogów). Jest zdefiniowany przy pomocy atrybutów "x", "y", "width", "height". Przez ustawienie atrybutów "rx" oraz "ry" można dodatkowo zaokrąglić rogi.
- circle: Okrąg ze środkiem w "cx", "cy" oraz promieniu "r".
- ellipse: Elipsa ze środkiem w "cx", "cy" oraz dwiema promieniami "rx" oraz "ry".
- line: Linia prosta. Linia jest zdefiniowana przez dwie pary współrzędnych "x", "y".
- polyline: Linia łamana. Połączenie linii (z otwartym obrysem), ich parametry są zapisywane do atrybutu "points".
- polygon: Wielokąt. Zamknięty kształt o dowolnej ilości punktów, zapisanych do atrybutu "points".
- path: Płaszczyzna ogólna (ścieżka). Ścieżki do ogólnego rysowania są zdefiniowane w atrybucie "d" przy pomocy następujących liter (niezależnie od wielkości DUŻE i małe):
m = moveto (ustaw bieżącą pozycję, bez rysowania linii)
l = lineto (narysuj odcinek)
c = curveto (narysuj krzywą Beziera 3 stopnia)
q = quadratic Bézier
a = arc (wycinek eliptyczny)
z = closepath (zamknij bieżącą płaszczyznę wektorową)
Przykład zastosowania kszatłtów podstawowych:
Na początku znajdują się tagi, które określa poprawności pliku SVG. Następuje tag <svg>, który w parametrach określa rozmiar obrazu i inne wartości. Następuje tag <g> który zgrupowuje obiekty i umożliwia wprowadzić wspólnych właściwości zagnieżdżonych obiektów.
Następują tagi <circle>, <rect>, <path>, <polygon>, <line> które określają podstawowy kształt obiektu. Obiekty te posiadają współrzędne pozycji i rozmiar w składni określonej przez normę W3C. Parametr fill = kolor narysowanego obszaru, stroke = kolor linii ograniczającej oraz stroke-width = szerokość linii ograniczającej.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100" version="1" svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle cx="18" cy="19" r="11" fill="#ffff00" stroke="#000000" stroke-width="1"/>
    <rect x="38" y="7" width="12" height="46" fill="#0000ff" stroke="#000000" stroke-width="0"/>
    <path d="M65 10 L55 27 L75 27" fill="#00ff00" stroke="#000000" stroke-width="1"/>
    <polygon points="7,50 15,85 30,78 25,64" fill="#ff0000" stroke="#000000" stroke-width="0"/>
    <line x1="38" y1="79" x2="73" y2="44" fill="none" stroke="#000000" stroke-width="3"/>
    <path d="M45 84 C60 94 74 68 85 84" fill="none" stroke="#000000" stroke-width="1"/>
  </g>
</svg>

2. Gradient (przejście barw)

Przykład zbiornika w kształcie walca:
We właściwości fill tagu <rect> jest zastosowane odniesienie do sposobu rysowania zdefiniowanego w sekcji o id="grLinearV". Ten jest zagnieżdżony v tagu <defs>.
W opisywanej sekcji w parametrach tagu <linearGradient> są określone współrzędne, kierunek przejścia barw i metody wyrysowania. Tagi <stop> określają pozycję, barwę i przejrzystość przejścia barw.
Podobne jest to w przypadku przejścia radialnego wykorzystanego v tagu <path>.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="250" height="500">
  <defs>
    <radialGradient id="grRadial" cx="50%" cy="50%" r="50%" spreadMethod="pad" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#fafafa" stop-opacity="1"/>
      <stop offset="100%" stop-color="#808080" stop-opacity="1"/>
    </radialGradient>
    <linearGradient id="grLinearV" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#808080" stop-opacity="1"/>
      <stop offset="50%" stop-color="#fafafa" stop-opacity="1"/>
      <stop offset="100%" stop-color="#808080" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <g stroke="#000000" stroke-width="0">
    <rect fill="url(#grLinearV)"
      x="0" y="50" width="250" height="400"/>
    <path fill="url(#grRadial)"
      d="M0,50 A125,50 0 1,1 250,50 M250,100 L250,100"/>
    <path fill="url(#grRadial)"
      d="M0,450 A125,50 0 1,0 250,450 M250,400 L250,400"/>
  </g>
</svg>

3. Transformacje

Przykład obrócenia dźwigni:
Oba obiekty <rect> przedstawiają dźwignię wytworzoną w pozycji poziomej. Obiekty te są zgrupowane v tagu <g>, w którego parametrze jest zastosowana transformacja, która wykona obrócenie obiektu o 90° ze środkiem według określonych współrzędnych.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100">
  <g transform="rotate(90 8 8)">
    <rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>
    <rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>
  </g>
  <circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>
</svg>
Przykład przesunięcia dźwigni:
Wszystkie obiekty, przedstawiające dźwignię są zgrupowane v tagu <g>. W nim jest zastosowana transformacja, która zapewni żeby współrzędne osi Y zostały wyświetlone jako przesunięte o wymaganą wartość.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100">
  <g transform="translate(0 84)">
    <rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>
    <rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>
    <circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>
  </g>
</svg>
Przykład obrócenia i przesunięcia dźwigni:
Kombinacja obu typów transformacji.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100">
  <g transform="translate(0 84)">
    <g transform="rotate(270 8 8)">
      <rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>
      <rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>
    </g>
    <circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>
  </g>
</svg>


Patrz tutorial SVG: http://www.w3schools.com/svg/default.asp
Patrz również:
- Grafika wektorowa SVG
Dokumentacja SCADA systemu PROMOTIC 9.0.27 MICROSYS, spol. s r.o.

Chcę wysłać uwagę dotyczącą niniejszej stronyKontakt do osoby odpowiedzialnej
© MICROSYS, spol. s r.o.