ساخت مستطیل با SVG:
همان طور که تابحال متوجه گردیده اید، تولید گونه های متعدد هندسی بوسیله فرمت SVG فعالیت مشقت وجود ندارد. مستطیل نیز از این قاعده مستثنا نمیباشد.
ساخت مستطیل با SVG
کد تگ svg برای رسم یک مستطیل بصورت ذیل است:
مانند استایل های css برای انتخاب بعد ها مستطیل می بایست از width و height به کار گیری کنیم.
پباده سازی بیضی به وسیله svg:
بیضی همانند دایره در svg پباده سازی می‌شود با این تفاوت که برخلاف دایره که صرفا یک border-radius داشتیم، برای پباده سازی بیضی می بایست دو border-radius افقی و عمودی تعریف و تمجید کنیم.
پباده سازی بیضی توسط svg
کد رسم یک بیضی بوسیله گونه های svg به حالت پایین هست:
ساخت چندضلعی (polygon) با svg:
پباده سازی چندضلعی با svg نیاز به یه خرده ترفند داراست. نخست به svg چندضلعی رنگ بک گراند (fill color) سبز و کناره رنگ زرد ۱۰ پیکسلی میدهیم. آن‌گاه اتریبیوت point را برای آن تمجید می‌کنیم. هر جفت از خصوصیات نقاط چندضلعی بیان کنده خصوصیات افقی و عمودی کناره های polygon هست. در‌این نمونه ما میخواهیم یک ستاره ساخت کنیم.
ساخت چندضلعی (polygon) با svg
تگ svg برای ساخت یک چندضلعی به طریق ستاره:
اضافه کردن متن به svg:
همان طور که در اولِ نوشته‌ی‌علمی پهنا کردیم، برای هر svg می قدرت متنی تمجید کرد که به وسیله گوگل ایندکس شود. برخلاف تکنولوژی های قدیمی اینترنت مانند مکان نما که متن درون آنان در گوگل ایندکس نمی‌شد. به این رخ می قدرت تکست موردنظر را به فرمت svg طولانی تر کرد:
Mohtava.info
همان طور که در کد فوق تماشا میکنید خصوصیات x و y را بهمراه برخی استایل های css (مانند font-size و color و…) را تمجید کرده ایم.
تولید مسیر (path) به وسیله svg:
برای پباده سازی یک مسیر به وسیله svg می بایست روی اتریبیوت d تمرکز کنیم. اتریبیوت ‘d’ چگونگی رسم مسیر را شرح می‌دهد. این پارامتر دربرگیرنده یکسری فاکتور گوناگون هست که عبارتند از:
M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bezier curve
T: smooth quadratic Bezier curveto
A: elliptical Arc
Z: closepath
تولید مسیر (path) به وسیله svg
به نمونه پایین دقت فرمایید:
مسیری که به وسیله svg رسم شده‌است این امکان را داراست که با یک متن دلخواه مالامال شود. بصورت تصویر تحت: