SVG - მასშტაბირებადი ვექტორულიგრაფიკებივიკიწიგნებიდან – სახელმძღვანელოების თავისუფალიბიბლიოთებიდან
http://ka.wikibooks.orgსარჩევიშესავალი...........................................................................................................................................2რა უნდა იცოდეთ?......................................................................................................................2რა არის SVG?...............................................................................................................................2SVG-ს ისტორია და უპირატესობები......................................................................................3SVG ფაილების დათვარიელება.............................................................................................3
SVG მაგალითები.............................................................................................................................3
SVG HTML გვერდებში...................................................................................................................4<EMBED> ტეგის გამოყენება....................................................................................................4<OBJECT> ტეგის გამოყენება...................................................................................................5<IFRAME> ტეგის გამოყენება...................................................................................................5ვისურვებდი..................................................................................................................................5
SVG RECT...........................................................................................................................................6SVG ფიგურები.............................................................................................................................6<RECT> ტეგი................................................................................................................................6
CIRCLE ტეგი......................................................................................................................................8ELLIPSE ტეგი....................................................................................................................................9LINE ტეგი.........................................................................................................................................10
POLYGON ტეგი...............................................................................................................................11POLYLINE ტეგი...............................................................................................................................12PATH ტეგი........................................................................................................................................12შესავალირა უნდა იცოდეთ?
სანამ SVG-ს სწავლას შეუდგებოდეთ უნდა იცოდეთ შემდეგი:●HTML●ბაზური XMLრა არის SVG?
SVG ითარგმნება, როგორც მასშტაბირებადი ვექტორული გრაფიკები (ScalableVector Graphics).

●

1●

SVG განსაზღვრავს ვექტორებს - ვებ გვერდებისთვის შექმნილ გრაფიკებს.

●SVG გრაფიკებს განსაზღვრავს XML ფორმატში.

●SVG გრაფიკების ხარისხი არ ეცემა მათი გადიდება/დაპატარავების შემთხვევაში.

●SVG ფაილებში ყოველ ელემენტსა და ატრიბუტს შეუძლია ანიმირება.

●SVG რეკომენდირებულია მსოფლიო ვებ ქსელის კონსორციუმის (W3C) მიერ .

●SVG ჩაშენებულია W3C სტანდარტებში, ისევე როგორც DOM და XLS.

SVG-ს ისტორია და უპირატესობებიSun Microsystems, Adobe, Apple, IBM და Kodak არიან ზოგიერთი ის კომპანიები,რომლებიც ჩაერთვნენ SVG-ს განსაზღვრაში. SVG-ს უპირატესობები სხვა გაფართოვებისსურათებთან მიმართებაში :SVG ფაილების წაკითხვა და მოდიფიკაცია შესაძლებელია ძალიან ბევრპროგრამაში(მათ შორისაა Notepad).

●

SVG ფაილები ბევრად პატარა და შეკუმშვადი ფაილებია, ვიდრე JPG და GIFფაილები.

●●SVG სურათები მასშტაბირებადი სურათებია.

SVG სურათების ამობეჩვდა შესაძლებელია დიდ რეზოლუციებზე მაღალიხარისხით.

●SVG სურათების ზომის შეცვლა შესაძლებელია. შესაძლებელია შეიცვალოსსურათის ნებისმიერი ნაწილი დამახინჯების გარეშე.

●SVG-ში ტექსტი მონიშვნადია, დაშესაძლებელია ტექსტის მოძებნა (საუკეთესოარუკების მარკირებისთვის).

●●SVG მუშაობს JAVA ტექნოლოგიებთან.

●SVG ფაილები არიან წმინდა XML ფაილები.

SVG-ს მთავარი კონკურენტია Flash.
SVG-ს უდიდესი უპირატესობაა სხვა სტანდარტებთან შეთანხმება(მათ შორის არიან XSL
და DOM), რაც ფლეშს არ გააჩნია. Flash შეთანხმებულია კერძო ტექნოლოგიებთან,რომლებიც არ არიან ღია წყაროები.
SVG-ს ნაკლი არის ის, რომ მას ყველა ბრაუზერი არ უზრუნველყოფს. Mozilla-სბრაუზერები, Firefox და Opera უზრუნველყოფენ SVG-ს. ასევე Microsoft-ის გეგმა არისSVG-ს უზრუნველყოფა.
SVG-ს მომხმარებელთა რიცხვი იზრდება და ამასთანავე Adobe GoLiveუზრუნველყოფს მას.

SVG ფაილების დათვარიელებათუ თქვენი ბრაუზერი არ უზრუნველყოფს SVG ფაილებს, მასინ თქვენ გჭირდებათ SVGviewer.
შენიშვნა : Firefox-ს და Opera-ს გააჩნიათ საკუთარი SVG Viewr-ები. ასე რომ, თუთქვენ იყენებთ ამ ბრაუზერებს, მოგიწევთ ცალკ ცალკე Viewer-ების დაყენება.
გადმოწერე SVG viewer უფასოდ Adobe-ის ოფიციალური ვებ გვერდიდან http://www.adobe.com/svg/viewer/install/

SVG მაგალითებიმიმდინარე მაგალითი არის უბრალო SVG ფაილის მაგალითი. SVG ფაილი უნდადამახსოვრდეს .svg გაფართოვებით :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
2

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg>
კოდის ახსნა :პირველი ხაზი შეიცავს XML დეკლარაციას. ცნობას ავტონომიური ატრიბუტის შესახებ!
ეს ატრიბუტი ზუსტად განსაზღვრავს რომ SVG ფაილი ავტონომიურია, თუ ის შეიცავს გარეფაილების კონფიგურაციებს.
standalone="no" ნიშნავს, რომ SVG შეიცავს გარე ფაილის კონფიგურაციებს, ამშემთხვევაში DTD - ს.
მეორე და მესამე ხაზები მიმართავენ გარე SVG DTD-ს. DTD-ს ადგილმდებარეობაა
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". DTD მდებარეობს W3C-ზედა ის შეიცავს SVG-ს ყველა დასაშვებ ელემენტს.
SVG კოდი იწყება <svg> ელემენტით, რომელიც შედგება საწყისი <svg> და სასრული</svg> ტეგებისგან. ეს არის ძირეული ელემენტი. სიგრძის და სიგანის ატრიბუტებიდასმულია SVG დოკუმენტის სიგრძესა და სიგანეში. ატრიბუტის ვერსია განსაზღვრავსSVG-ს ვერსიას და xmlns ატრიბუტი განსაზღვრავს SVG-ს სახელის ზოლს.
SVG-ს <circle> ელემენტი გამოყენებულია წრის შესაქმნელად. Cx და cy ატრიბუტებისაზღვრავენ წრის ცენტრის x და y კოორდინატებს. თუ Cx და cy გამოტოვებულია, წრისცენტრის კოორდინატები იქნება (0, 0). R ატრიბუტი საზღვრავს წრის რადიუსს.
Stroke და stroke-width ატრიბუტები აკონტროლებენ, თუ როგორ უნდა გამოისახოსფიგურის კონტური. კოდში კონტურის სიფართე დასმულია 2 პიქსელზე და საზღვრის ფერიშავზე.
Fill ატრიბუტი მიმართავს ფიგურის შინაგან ფერს. კოდში ფიგურის ფერია - წითელი.
სასრული </svg> ტეგი ხურავს ძირეულ SVG ელემენტს და დოკუმენტს.
შენიშვნა: ყველა გახსნილი ტეგი აუცილებლად უნდა დაიხუროს.

SVG HTML გვერდებში<EMBED> ტეგის გამოყენება<embed> ტეგი უზრუნველყოფილია ყველა დიდი ბრაუზერის მიერ.
შენიშვნა: Adobe SVG Viewer იძლევა რეკომენდაციას იმის შესახებ, რომ EMBED ტეგიგამოიყენოთ, მაშინ, როცა SVG-ს ამაგრებთ HTML-ში. თუ გსურთ შექმნათ სწორი XHTML,თქვენ ვერ გამოიყენებთ <embed> ტეგს - <embed> ტეგი არ არის HTML-ისსპეციფიკაციების სიაში შეტანილი.
<embed src="rect.svg" width="300" height="100"type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />3შენიშვნა: pluginspage ატრიბუტი მიმართავს URL-ს პლაგინის გადმოსაწერად.
წვრილმანი: ინტერნეტ ექსპლორერი უზრუნველყოფს დამატებით ატრიბუტს,wmode="transparent", რომელიც HTML გვერდის ფონს ქმნის სრულიად კაშკაშას.

<OBJECT> ტეგის გამოყენება<object> ტეგი არის HTML-ის სტანდარტული ტეგი და ის უზრუნველყოფილია ყველაახალი ბრაუზერის მიერ. არახელსაყრელია ის, რომ ეს ტეგი არ უშვებს სკრიფტინგს.
შენიშვნა: თუ თქვენ დაყენებული გაქვთ Adobe SVG Viewer-ის ბოლო ვერსია, SVG
ფაილები არ იმუშავებენ <object> ტეგის გამოყენების შემთხვევაში.
<object data="rect.svg" width="300" height="100"type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />შენიშვნა: codebase ატრიბუტი მიმართავს URL-ს პლაგინის გადმოსაწერად.

<IFRAME> ტეგის გამოყენება
<iframe> ტეგი მუშაობს თითქმის ყველა ბრაუზერში.
<iframe src="rect.svg" width="300" height="100"></iframe>ვისურვებდი...
ვისურვედი SVG ელემენტების პირდაპირ HTML კოდში ჩამატებას, მხოლოდ SVG-სსახელის ზომის მიმართვისგან, ამის მსგავსად :<html
xmlns:svg="http://www.w3.org/2000/svg"><body><p>This is an HTML paragraph</p><svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg></body></html>4

SVG RECT
SVG ფიგურებიSVG-ს გააჩნია ზოგიერთი განსახვავებული ფიგურა, რომლის გამოყენება დამანიპულირება შესაძლებელია შემქმნელების მიერ :●მართკუთხედი <rect>;●წრე <circle>;●ელიფსი <ellipse>;●ხაზი <line>;●ტეხილი ხაზი <polyline>;●პოლიგონი <polygon>;●ბილიკი <path>.

<RECT> ტეგი<rect> ტეგი გამოიყენება მართკუთხედის და მართკუთხედის მაგვარი ფიგურებისშესაქმნელად.
იმისათვის რომ გაუგოთ სამუშაოს, დააკოპირეთ მიმდინარე კოდი Notepad-ში დადაამახსოვრეთ ფაილი, როგორც "rect1.svg". განათავსეთ ფაილი თქვენს ბრაუზერისდირექტორიაში :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>

კოდის ახსნა:Rect ელემენტის width და height ატრიბუტები განისაზღვრებიან მართკუთხედისსიგრზე და სიგანეში.
●5Style ატრიბუტი გამოიყენება CSS თვისებების განსაზღვრისთვის.

●

CSS fill თვისება განსაზღვრავს მართკუთხედის ფერს.

●CSS stroke-width თვისება განსაზღვრავს მართკუთხედის საზღვრის ზომას.

●CSS stroke თვისება განსაზღვრავს მართკუთხედის საზღვრის ფერს.

განიხილეთ სხვა მაგალითი, რომელიც შეიცავს რამოდენიმე ახალ ატრიბუტს :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></svg>

კოდის ახსნა:●X ატრიბუტი განსაზღვრავს მართკუთხედის მარცხენა პოზიციას.

●Y ატრიბუტი განსაზღვრავს მართკუთხედის მარჯვენა პოზიციას.

●CSS fill-opacity თვისება განსაზღვრავს ფერის გამჭირვალეობას.

●CSS stroke-opacity განსაზღვრავს შტრიხების ფერის გამჭირვალეობას.

მთლიანი ელემენტის გამჭირვალეობის განსაზღვრა :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/></svg>
კოდის ახსნა:CSS opacity თვისება განსაზღვრავს მთლიანი ელემენტის გამჭირვალეობას.
6ბოლო მაგალითი, მომრგვალებული კუთხეების მქონე მართხკუთხედის შექმნა :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" rx="20" ry="20" width="250"height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/></svg>

კოდის ახსნა:rx და ry ატრტიბუტები განსაზღვრავენ მართკუთხედის კუთხეების მომრგვალებას.

CIRCLE ტეგი<circle> ტეგი გამოიყენება წრის შესაქმნელად.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg>
კოდის ახსნა:7cx და cy ატრიბუტები განსაზღვრავენ წრის ცენტრის x და y კოორდინატებს. თუcx და cy ატრიბუტები გამოტოვებულნი არიან,მაშინ წრის ცენტრის კოორდინატებია(0, 0).

●●R ატრიბუტი განსაზღვრავს წრის რადიუსს.

ELLIPSE ტეგი<ellipse> ტეგი გამოიყენება ელიფსის შესაქმნელად. ელიფსი და წრე გვანანერთმანეთს. განსხვავება ისაა, რომ ელიფსის x და y რადიუსები განსხვავდებიანერთმანეთისაგან.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>

კოდის ახსნა:●Cx ატრიბუტი განსაზღვრავს ელიფსის ცენტრის x კოორდინატს.

●Cy ატრიბუტი განსაზღვრავს ელიფსის ცენტრის y კოორდინატს.

●Rx განსაზღვრავს ჰორიზონტალურ რადიუსს.

●Ry განსაზღვრავს ვერტიკალურ რადიუსს.

მიმდინარე მაგალითი ქმნის ერთმანეთზე დალაგებულ სამ ელიფსს :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="240" cy="100" rx="220" ry="30"style="fill:purple"/><ellipse cx="220" cy="70" rx="190" ry="20"style="fill:lime"/><ellipse cx="210" cy="45" rx="170" ry="15"8style="fill:yellow"/></svg>

მიმდინარე მაგალითი აერთიანებს ორ ელიფსს :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="240" cy="100" rx="220" ry="30"style="fill:yellow"/><ellipse cx="220" cy="100" rx="190" ry="20"style="fill:white"/></svg>

LINE ტეგი
<line> ტეგი გამოიყენება ხაზის შესაქმნელად.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></svg>
9კოდის ახსნა:●x1 განსაზღვრავს ხაზის დაწყებას x-ღერძზე.

●y1 განსაზღვრავს ხაზის დაწყებას y-ღერძზე.

●X2 განსაზღვრავს ხაზის დაწყებას x2-ღერძზე.

●Y2 განსაზღვრავს ხაზის დაწყებას y2-ღერძზე.

POLYGON ტეგი<polygon> ტეგი გამოიყენება გრაფიკების შესაქმნელად, რომლებსაც გააჩნიათ სამი,ან მეტი მხარე.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></svg>
კოდის ახსნა:Points ატრიბუტი განსაზღვრავს პოლიგონის თითო კითხის x და yკოორდინატებს.

●მიმდინარე მაგალითი ქმნის პოლიგონს ოთხი მხრით :<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
10

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></svg>POLYLINE ტეგი<polyline> ტეგი გამოიყენება სწორი ხაზებისაგან შემდგარი ნებისმიერი ფიგურისშესაქმნელად.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></svg>PATH ტეგი
<path> ტეგი გამოიყენება ბილიკის განსაზღვრისთვის.
მიმდინარე ბრძანებები დასაშვებია ბილიკის ინფორმაციისთვის :11●

M = გადაადგილება

●L = ხაზისკენ●H = ჰორიზონტალური ხაზისკენ

●V = ვერტიკალური ხაზისკენ

●C = მრუდისკენ

●S = გლუვი კუთხისკენ●Q = კვადრატული კუთხისკენ

●T = გლუვი კვადრატული კუთხისკენ

●A = ელიფსური თაღი●Z = ბილიკის დახურვა

შენიშვნა: ყველა ბრძანებას შეუძლია აგრეთვე გამოისახოს პატარა ასოებით. მთავრულიასოები ნიშნავს აბსოლიტურ ადგილმდებარეობას, პატარა ასოები ნიშნავს შედარებითადგილმდებარეობას.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg>
ეს მაგალითი საზღვრავს ბილიკს, რომელიც იწყება 250 150 პოზიციიდან ხაზისკენ 150350 პოზიციასთან ერთად, შემდეგ აქედანვე ხაზისკენ 350 350 და საბოლოოდ იხურებაბილიკი უკნისაკენ 250 150.

მიმდინარე მაგალითი ქმნის სპირალს:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
12

C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/></svg>

13