آموزش svg
مقدمه
در این مقاله قصد داریم تا بیشتر با svg آشنا بشیم و نحوه استفاده و کدنویسی svg و یاد بگیریم اگه هنوز در مورد svg چیز زیادی نمیدونید بهتره مقاله های قبلی ما در مورد اینه که svg چیست و هم چنین نحوه استفاده svg در صفخات وب را مطالعه کنید و بعد به سراغ این مقاله بیاین.
آموش svg و یادگرفتن اون بسیار سادست و شما براحتی میتونید اونو یاد بگیرید.
مطالبی که در این درس یاد خواهید گرفت عبارتند از :
با اومدن html5 این امکان که svg و مستقیم به صفحات وب اضافه کنیم هستش.
شما با استفاده از تگ <svg> میتونید در هرجای صفحه که خواستید اشکال مورد نظرتون و رسم کنید.
یک مثال ساده برای آموزش svg کد زیر هستش :
<!DOCTYPE html>
<html>
<body><h1>رسم svg </h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" />
</svg></body>
</html>
توضیحات کد بالا :
این کد یک دایره برایمان رسم میکند:
به همین سادگی میتوانید اشکال هندسی ایجاد کنید.
بدین منظور کد زیر را در داکیومنت HTML خود وارد کنید.
<svg>
<line x1=”0″ y1=”0″ x2=”200″ y2=”0″ style=”stroke:rgb(0,0,0);stroke-width:1″ /></line>
</svg>
روش تعریف تگ SVG بدین صورت است که ابتدا تگ <svg> را تعریف کرده سپس از زبان نشانه گذاری xml برای تعریف شکل دلخواه استفاده می کنیم. در کد فوق پارامترهای زیر را تعریف کرده ایم:
Svg فوق یک خط افقی به رنگ مشکی ایجاد می کند. حال اگر بخواهیم یک خط مورب را توسط svg ترسیم کنیم، کافیست مقدار پارامتر y2 را به ۲۰۰ تغییر دهیم. همچنین می توان رنگ این خط را به دو صورت تغییر دهیم، یکی اینکه استایل درون خطی برای آن تعریف کنیم و دیگری اینکه در یک فایل css برای آن استایل موردنظر خود را اعمال کنیم.
کد svg خط مورب بصورت زیر می باشد:
<svg>
<line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(0,255,255);stroke-width:10″ /></line>
</svg>
در آموزش svg برای ترسیم دایره همانند خط ترسیم شود با انجام تغییراتی در پارامترهای SVG . در این مثال می خواهیم دایره ای با رنگ داخلی نقره ای و حاشیه مشکی طراحی کنیم که BORDER-RADIUS آن ۵۰ پیکسل است:
کد svg برای طراحی دایره بصورت زیر است:
<svg>
<circle cx=”60″ cy=”60″ r=”50″ stroke=”#ed145b” stroke-width=”5″ fill=”#00746b” />
</svg>
اتریبیوت های CX و CY بیانگر مختصات X و Y وسط دایره می باشند. اگر این پارامترها را تعریف نکنیم، بطور پیش فرض مختصات ۰ برای وسط دایره درنظر گرفته می شود که جالب نمی باشد. پارامتر r نیز مشخص کننده border-radius می باشد.
همانطور که تابحال متوجه شده اید، ایجاد اشکال مختلف هندسی توسط فرمت SVG کار سختی نیست. مستطیل نیز از این قاعده مستثنا نمی باشد.
کد تگ svg برای ترسیم یک مستطیل بصورت زیر می باشد:
<svg>
<rect
width=”200″
height=”100″
style=”
fill:#92278f;
stroke-width:5″ />
</rect>
</svg>
مانند استایل های css برای تعیین ابعاد مستطیل باید از width و height استفاده کنیم.
مستطیل با گوشه های گرد
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:#9e0039;stroke:black;stroke-width:5;opacity:0.5" />
بیضی همانند دایره در آموزش svg طراحی می شود با این تفاوت که برخلاف دایره که فقط یک border-radius داشتیم، برای طراحی بیضی باید دو border-radius افقی و عمودی تعریف کنیم.
کد ترسیم یک بیضی توسط اشکال svg به شکل زیر است:
<svg>
<ellipse cx=”60″ cy=”60″ ry=”40″ rx=”20″ stroke=”yellow” stroke-width=”5″ fill=”green” /></ellipse>
</svg>
طراحی چندضلعی با svg نیاز به کمی ترفند و آموزش svg حرفه ای دارد. ابتدا به svg چندضلعی رنگ بک گراند (fill color) سبز و حاشیه زردرنگ ۱۰ پیکسلی می دهیم. سپس اتریبیوت point را برای آن تعریف می کنیم. هر جفت از مختصات نقاط چندضلعی بیانگر مختصات افقی و عمودی گوشه های polygon می باشد. در این مثال ما می خواهیم یک ستاره ایجاد کنیم.
تگ svg برای ایجاد یک چندضلعی به شکل ستاره:
<svg>
<polygon fill=”green” stroke=”orange” stroke-width=”10″ points=”350, 75 ۳۷۹,۱۶۱ ۴۶۹,۱۶۱ ۳۹۷,۲۱۵ ۴۲۳,۳۰۱ ۳۵۰,۲۵۰ ۲۷۷,۳۰۱ ۳۰۳,۲۱۵ ۲۳۱,۱۶۱ ۳۲۱,۱۶۱″ />
</polygon>
</svg>
<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
همانطور که در ابتدای مقاله عرض کردیم، برای هر svg می توان متنی تعریف کرد که توسط گوگل ایندکس شود. برخلاف تکنولوژی های سابق وب مانند فلش که متن داخل آنها در گوگل ایندکس نمی شد. بدین صورت می توان تکست موردنظر را به فرمت svg اضافه کرد:
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
همانطور که در کد فوق مشاهده می کنید مختصات x و y را بهمراه برخی استایل های css (مانند font-size و colorو…) را تعریف کرده ایم.
برای طراحی یک مسیر توسط 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
به مثال زیر توجه کنید:
<svg>
<path id=”path1″ d=”M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428″ style=”fill:none;stroke:2;”></path>
</svg>
مسیری که توسط svg ترسیم شده است این قابلیت را دارد که با یک متن دلخواه پر شود. بصورت تصویر زیر:
کد درج متن روی مسیر ایجاد شده با SVG:
<svg>
<defs>
<path id=”path1″ d=”M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428″></path>
</defs>
<text x=”0″ y=”34″ fill=”black” style=”font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; “>
<textPath xlink:href=”#path1″>Mohtava.info</textPath>
</text>
</svg>
همانطور که در کد بالا مشاهده می کنید، این svg از دو بخش تشکیل شده است. تگ def و تگ text . مشخصات مسیر (path) را در تگ defs تعریف می کنیم و مشخصات متن موردنظر را در تگ text . به تگ path آیدی path1 داده ایم و سپس مقدار اتریبیوت textPath واقع در تگ text را برابر آیدی path1 قرار داده ایم.
برای آموزش svg بهتر است چند مثال را بررسی کنیم .مثال زیر یک رسم را مشخص می کند که از نقطه ی (150,0) شروع می شود و سپس یک خط به نقطه ی (75,200) رسم می شود و سپس از آنجا، یک خط به نقطه ی (225,200) رسم می شود و در آخر مسیر بسته می شود و به نقطه ی (150,0) باز می گردیم:
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
مثالی دیگر برای آموزش svg : از منحنی های درجه 2، برای رسم و مدل سازی منحنی های صاف(هموار) استفاده می شود. برای رسم این چنین منحنی ها، کاربر دو نقطه ی ابتدا و انتها را مشخص می کند و سپس دو نقطه ی کنترل(نقاط خط مماس) را نیز مشخص می کند. یک منحنی که دارای یک نقطه ی کنترل باشد، یک منحنی درجه 2(سهمی) گفته می شود و یک منحنی که دارای 2 نقطه ی کنترل باشد، منحنی مکعبی نامیده می شود.
در مثال زیر، یک منحنی درجه 2(سهمی) را ایجاد می کنیم به طوری که نقاط A و C به ترتیب نقاط شروع و پایان هستند و نقطه ی B، یک نقطه ی کنترل است:
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
در آموزش svg برای استایل دهی به svg شما همچنین می توانید تگ svg را توسط استایل های css شخصی سازی کنید و موقعیت آن را مشخص کنید. علاوه بر این شما می توانید تگ svg را در تگ لینک (anchor tag) قرار دهید تا شکل یا مسیر طراحی شده با svg بصورت لینک درآید. و یا حتی می توان اشکال svg را توسط جی کوئری دستکاری کرد.
استفاده از فرمت svg این امکان را برای طراحان وب فراهم می کند که اشکال scalable ایجاد کنند که در تمام اسکرین ها و دستگاه های موجود در بازار بخوبی نمایش می یابند و از کیفیت آنها کاسته نخواهد شد. بویژه در این روزها که اسکرین های رتینا (retina screen) در حال گسترش می باشند، استفاده از طراحی svg بسیار کاربردی خواهد بود.
مسلما فرمت svg در تمام موقعیت ها و سناریوها نمی تواند پاسخگوی کار طراحان وب در طراحی سایت باشد اما برای طراحی اشکال گرافیکی وکتور بسیار سودمند هستند.