{"id":26488,"date":"2026-07-28T19:38:00","date_gmt":"2026-07-28T17:38:00","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26488"},"modified":"2026-07-28T19:38:02","modified_gmt":"2026-07-28T17:38:02","slug":"wykorzystanie-grafiki-svg-w-symbolach-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-10","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wykorzystanie-grafiki-svg-w-symbolach-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-10\/","title":{"rendered":"Wykorzystanie grafiki SVG w symbolach | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 10"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku dowiemy si\u0119, jak dodawa\u0107 do symboli Industrial Graphics grafik\u0119 w formacie SVG.<\/p>\n\n\n

\n

Kurs projektowania symboli Industrial Graphics w oprogramowaniu wizualizacyjnym AVEVA<\/strong><\/h3>\n\n
\n1. Wprowadzenie do Industrial Graphics<\/a>
\n

Edytor Industrial Graphics<\/h4>\n2. Edytor symboli Industrial Graphics<\/a>
\n3. Zaznaczanie i przesuwanie element\u00f3w graficznych<\/a>
\n4. Grupowanie element\u00f3w graficznych<\/a>
\n5. Wyr\u00f3wnywanie element\u00f3w graficznych<\/a>
\n6. Zmiana orientacji element\u00f3w graficznych<\/a>
\n7. Kolejno\u015b\u0107 element\u00f3w w osi Z (z-order)<\/a>
\n8. Dynamiczna zmiana rozmiaru<\/a>
\n9. Tworzenie symboli na podstawie zmiennych<\/a>
\n10. Wykorzystanie grafiki SVG w symbolach<\/a><\/td>\n

Rysowanie w Industrial Graphics<\/h4>\n11. Rysowanie linii
\n12. Rysowanie kszta\u0142t\u00f3w
\n13. Teksty i pola tekstowe
\n14. Wy\u015bwietlanie statusu jako\u015bci danych
\n15. Praca z przyciskami wyboru (radio buttons)
\n16. Praca z kontrolk\u0105 kalendarza
\n17. Praca z kontrolk\u0105 wyboru daty i czasu
<\/td>\n


Animacje<\/h4>\n18. Wprowadzenie do animacji
\n19. Animacja wype\u0142nienia procentowego
\n20. Animacja wy\u015bwietlania warto\u015bci
\n21. Animacja wprowadzania warto\u015bci
\n

Narz\u0119dzia zaawansowane<\/h4>\n22. Wprowadzenie do w\u0142a\u015bciwo\u015bci Custom Properties
\n23. Dodawanie w\u0142a\u015bciwo\u015bci Custom Properties
\n24. Wprowadzenie do styl\u00f3w
\n25. Wprowadzenie do skrypt\u00f3w
\n26. Edytor skrypt\u00f3w Industrial Graphics
<\/td>\n<\/tr><\/table>\n<\/div>\n\n\n
<\/div>\n\n\n\n

SVG (Scalable Vector Graphics) to otwarty, uniwersalny format graficzny s\u0142u\u017c\u0105cy do opisu dwuwymiarowej grafiki wektorowej. Jest on oparty na j\u0119zyku znacznik\u00f3w XML. Obrazy w formacie SVG mog\u0105 by\u0107 wykorzystywane do budowania grafik symboli Industrial Graphics.<\/p>\n\n\n\n

Aby umie\u015bci\u0107 grafik\u0119 SVG w obiekcie Industrial Graphics, wystarczy j\u0105 zaimportowa\u0107, za pomoc\u0105 polecenia Import SVG<\/strong>. Jest ono dost\u0119pne na pasku narz\u0119dziowym:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Alternatywnie mo\u017cna je r\u00f3wnie\u017c wybra\u0107 z menu Graphic<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Otworzy si\u0119 przegl\u0105darka plik\u00f3w.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Mo\u017cemy teraz wybra\u0107 plik graficzny SVG z dysku, a po naci\u015bni\u0119ciu Open<\/strong> wskaza\u0107 miejsce, w kt\u00f3rym obraz powinien zosta\u0107 umieszczony, i klikn\u0105\u0107 przyciskiem myszy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Drugim sposobem jest otwarcie pliku SVG w postaci tekstowej (np. w Notatniku).<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Mo\u017cemy wtedy zaznaczy\u0107 ca\u0142y tekst zawarty w takim pliku, skopiowa\u0107 go do schowka, a nast\u0119pnie klikn\u0105\u0107 prawym klawiszem myszy na obszarze roboczym edytora Industrial Graphics i z menu kontekstowego wybra\u0107 Paste SVG<\/strong> (skr\u00f3t klawiszowy CTRL+T).<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Pojawi si\u0119 specjalny kursor, za pomoc\u0105 kt\u00f3rego mo\u017cemy umie\u015bci\u0107 grafik\u0119 w wybranym miejscu.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Tak wklejona grafika mo\u017ce by\u0107 dowolnie skalowana. Warto te\u017c zwr\u00f3ci\u0107 uwag\u0119, \u017ce ma ona posta\u0107 grupy z\u0142o\u017conej z poszczeg\u00f3lnych element\u00f3w \u2013 takich, z jakich zbudowany jest oryginalny plik SVG. Wida\u0107 to w panelu Elements<\/strong>. Dzi\u0119ki temu ka\u017cdym z element\u00f3w takiej grafiki mo\u017cna oddzielnie manipulowa\u0107. Grupowaniu element\u00f3w po\u015bwi\u0119cony by\u0142 4 odcinek tego kursu<\/a>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Nie wszystkie elementy standardu SVG s\u0105 obs\u0142ugiwane w symbolach Industrial Graphics. Przyk\u0142adem mog\u0105 by\u0107 cienie (drop shadow). Aby sprawdzi\u0107, jakie elementy w plikach SVG s\u0105, a jakie nie s\u0105 obs\u0142ugiwane, warto sprawdzi\u0107 dokumentacj\u0119. W pomocy AVEVA (AVEVA Help<\/strong> w menu Start) wybieramy rozdzia\u0142 AVEVA Industrial Graphics Editor<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Nast\u0119pnie w polu wyszukiwarki wprowadzamy \u201esvg\u201d, a nast\u0119pnie wybieramy artyku\u0142 \u201eSVG graphic limitations\u201d.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Wy\u015bwietlona zostanie tabela zawieraj\u0105ca informacj\u0119 o wszystkich obs\u0142ugiwanych i nieobs\u0142ugiwanych elementach standardu SVG.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

W nast\u0119pnym odcinku poznawa\u0107 pierwsze elementy, z wykorzystaniem kt\u00f3rych mo\u017cemy rysowa\u0107 symbole Industrial Graphics.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
\n

Newsletter Poradnika Automatyka<\/h3><\/div>\n

Czytaj trendy i inspiracje, podstawy automatyki, automatyk\u0119 w praktyce<\/p>\n<\/div>\n

\n
\n