SVG/SVG მაგალითები

მიმდინარე მაგალითი არის უბრალო SVG ფაილის მაგალითი. SVG ფაილი უნდა დამახსოვრდეს .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">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

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 ელემენტს და დოკუმენტს.
შენიშვნა : ყველა გახსნილი ტეგი აუცილებლად უნდა დაიხუროს.