{"id":203,"date":"2018-04-28T01:44:38","date_gmt":"2018-04-27T23:44:38","guid":{"rendered":"http:\/\/www.numlock.edu.pl\/blog\/?p=203"},"modified":"2018-05-05T10:59:08","modified_gmt":"2018-05-05T08:59:08","slug":"svg-grafika-slowem-malowana","status":"publish","type":"post","link":"http:\/\/www.numlock.edu.pl\/blog\/2018\/04\/28\/svg-grafika-slowem-malowana\/","title":{"rendered":"SVG &#8211; grafika s\u0142owem malowana"},"content":{"rendered":"<p>Ods\u0142ony: 317<\/p><p>Wyobra\u017a sobie, \u017ce w swoim blogu czy w witrynie umieszczasz rysunek ko\u0142a (mniejsza w tym miejscu, co mia\u0142by tam robi\u0107) \u2013 w programie graficznym nadajesz mu promie\u0144 50 pikseli, obramowanie w kolorze czerwonym, a wype\u0142nienie w niebieskim. Pracowicie zapisujesz rysunek na dysku, eksportujesz do formatu JPG lub PNG i wstawiasz do dokumentu. Po jakim\u015b czasie okazuje si\u0119, \u017ce ko\u0142o musi mie\u0107 promie\u0144 100 pikseli, obramowanie niebieskie, a wype\u0142nienie czerwone. Siadasz poirytowany do komputera i robisz nowy rysunek.<\/p>\n<p>A wyobra\u017amy sobie inne rozwi\u0105zanie, kt\u00f3re w wielu sytuacjach mo\u017ce si\u0119 okaza\u0107 znacznie prostsze i wygodniejsze, cho\u0107 naturalnie nie jest wcale uniwersalne i do zastosowania w ka\u017cdych okoliczno\u015bciach. Rozwi\u0105zaniem tym jest grafika SVG.<\/p>\n<p>Obraz w formacie SVG jest <strong>obrazem zbudowanym z polece\u0144 zapisanych w postaci tekstu<\/strong>, analogicznych do j\u0119zyka HTML czy CSS &#8211; przegl\u0105darka z wbudowanym interpreterem SVG czyta taki kod \u017ar\u00f3d\u0142owy i wy\u015bwietla odpowiedni obraz. Wszystkie g\u0142\u00f3wne przegl\u0105darki wspieraj\u0105 naturalnie SVG. Przyk\u0142adowy kod:<\/p>\n<pre class=\"kod\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" width=\"500\" height=\"150\"&gt;\r\n&lt;circle cx=\"100\" cy=\"80\" r=\"50\" stroke=\"red\" stroke-width=\"3\" fill=\"blue\" \/&gt;\r\n&lt;\/svg&gt;<\/pre>\n<p>Kod ten wygeneruje ko\u0142o z pierwszego przyk\u0142adu.<\/p>\n<p><svg height=\"150\" version=\"1.1\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"100\" cy=\"80\" fill=\"blue\" r=\"50\" stroke-width=\"3\" stroke=\"red\"><\/circle><\/svg> <\/p>\n<p>Zmieniamy teraz szybko r=50 na r=100, stroke=&#8221;red&#8221; na stroke=&#8221;blue&#8221;, a fill=&#8221;blue&#8221; na fill=&#8221;red&#8221; i uzyskujemy takie ko\u0142o:<\/p>\n<p><svg height=\"250\" version=\"1.1\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"110\" cy=\"110\" fill=\"red\" r=\"100\" stroke-width=\"3\" stroke=\"blue\"><\/circle><\/svg><\/p>\n<p>Jak widzimy, kilka drobnych zmian w kodzie ko\u0142a zmieni\u0142o radykalnie jego posta\u0107. Za ka\u017cdym razem, gdy b\u0119dziemy chcieli zmieni\u0107 promie\u0144, kolory wn\u0119trza i obramowania, grubo\u015b\u0107 obramowania czy po\u0142o\u017cenie \u015brodka ko\u0142a, mo\u017cemy to zrobi\u0107 b\u0142yskawicznie za pomoc\u0105 drobnej manipulacji w kodzie \u017ar\u00f3d\u0142owym ko\u0142a. Kr\u00f3tko m\u00f3wi\u0105c, to my podajemy rozkaz, a przegl\u0105darka pos\u0142usznie maluje zgodny z nim obraz. Nietrudno si\u0119 domy\u015bli\u0107, \u017ce technika ta ma w sobie ogromny potencja\u0142, a zwyk\u0142y u\u017cytkownik mo\u017ce j\u0105 wykorzysta\u0107 cho\u0107by w blogu, je\u015bli tylko nadarzy si\u0119 taka okazja. To tylko kr\u00f3tki wst\u0119p do SVG, na zach\u0119t\u0119.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ods\u0142ony: 317Wyobra\u017a sobie, \u017ce w swoim blogu czy w witrynie umieszczasz rysunek ko\u0142a (mniejsza w tym miejscu, co mia\u0142by tam robi\u0107) \u2013 w programie graficznym nadajesz mu promie\u0144 50 pikseli, obramowanie w kolorze czerwonym, a wype\u0142nienie w niebieskim. Pracowicie zapisujesz rysunek na dysku, eksportujesz do formatu JPG lub PNG i &hellip;<\/p>\n","protected":false},"author":1,"featured_media":207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[69,54],"tags":[64,68],"_links":{"self":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/203"}],"collection":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":6,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":260,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions\/260"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media\/207"}],"wp:attachment":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}