آموزش svg

مطالبی که در این درس یاد خواهید گرفت عبارتند از :

SVG در HTML5
رسم مستطیل در SVG
رسم دایره در SVG
رسم بیضی در SVG
رسم خط در SVG
رسم چندضلعی در SVG
رسم چندخطی در SVG
رسم یا مسیر در SVG
متن در SVG
شیوه ی رسم در SVG

SVG در HTML5

با اومدن 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>

توضیحات کد بالا :

این کد یک دایره برایمان رسم میکند:

svg: یک عکس SVG با استفاده از عنصر <svg> آغاز می شود.
width : مقدار عرض شکل ترسیمی را مشخص میکند .
height : مقدار طول را مشخص میکند.
circle : یک دایره برایمان رسم میکند با این ویژگی که درس امروز ماست بیشتر آشنا خواهیدشد.
cx و cy : خصوصیات cx و cy، به ترتیب مختصات x و y از مرکز دایره را مشخص می کنند. اگر که cx و cy تعریف نشوند، مرکز دایره به مختصات (0,0) تنظیم خواهد شد.
r : خصوصیت r، شعاع دایره را مشخص می کند.
stroke : خصوصیات stroke و stroke-width درواقع خط دور دایره(کادر) را مشخص می کنند. در اینجا رنگ کادر را با استفاده از خصوصیت stroke برابر با green قرار دادیم، و ضخامت این خط را با استفاده از خصوصیت stroke-width برابر با 4px قرار داده ایم.
fill : رنگ درون دایره را مشخص می کند. که در اینجا ما آن را برابر با رنگ blue آبی قرار داده ایم.

به همین سادگی میتوانید اشکال هندسی ایجاد کنید.

ترسیم خط توسط SVG:

بدین منظور کد زیر را در داکیومنت 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 برای تعریف شکل دلخواه استفاده می کنیم. در کد فوق پارامترهای زیر را تعریف کرده ایم:

x1: مختصات شروع خط روی محور افقی x
y1: مختصات شروع خط روی محور عمودی y
x2: مختصات پایان خط روی محور افقی x
y2: مختصات پایان خط روی محور عمودی y

ترسیم خط مورب توسط svg:

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 برای ترسیم دایره همانند خط ترسیم شود با انجام تغییراتی در پارامترهای 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 برای ترسیم یک مستطیل بصورت زیر می باشد:

<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:

بیضی همانند دایره در آموزش 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>

ایجاد چندضلعی (polygon) با svg:

طراحی چندضلعی با svg نیاز به کمی ترفند و آموزش svg حرفه ای دارد. ابتدا به svg چندضلعی رنگ بک گراند (fill color) سبز و حاشیه زردرنگ ۱۰ پیکسلی می دهیم. سپس اتریبیوت point را برای آن تعریف می کنیم. هر جفت از مختصات نقاط چندضلعی بیانگر مختصات افقی و عمودی گوشه های polygon می باشد. در این مثال ما می خواهیم یک ستاره ایجاد کنیم.

تگ svg برای ایجاد یک چندضلعی به شکل ستاره:

<svg>
<polygon fill=”green” stroke=”orange” stroke-width=”10″ points=”350, 75 ۳۷۹,۱۶۱ ۴۶۹,۱۶۱ ۳۹۷,۲۱۵ ۴۲۳,۳۰۱ ۳۵۰,۲۵۰ ۲۷۷,۳۰۱ ۳۰۳,۲۱۵ ۲۳۱,۱۶۱ ۳۲۱,۱۶۱″ />
</polygon>
</svg>

رسم چندخطی در 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 اضافه کرد:

<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>

همانطور که در کد فوق مشاهده می کنید مختصات 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

به مثال زیر توجه کنید:

    <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>

مثال 2

مثالی دیگر برای آموزش 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" />

<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>

<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 توسط css:

در آموزش svg برای استایل دهی به svg شما همچنین می توانید تگ svg را توسط استایل های css شخصی سازی کنید و موقعیت آن را مشخص کنید. علاوه بر این شما می توانید تگ svg را در تگ لینک (anchor tag) قرار دهید تا شکل یا مسیر طراحی شده با svg بصورت لینک درآید. و یا حتی می توان اشکال svg را توسط جی کوئری دستکاری کرد.

نتیجه گیری :

استفاده از فرمت svg این امکان را برای طراحان وب فراهم می کند که اشکال scalable ایجاد کنند که در تمام اسکرین ها و دستگاه های موجود در بازار بخوبی نمایش می یابند و از کیفیت آنها کاسته نخواهد شد. بویژه در این روزها که اسکرین های رتینا (retina screen) در حال گسترش می باشند، استفاده از طراحی svg بسیار کاربردی خواهد بود.

مسلما فرمت svg در تمام موقعیت ها و سناریوها نمی تواند پاسخگوی کار طراحان وب در طراحی سایت باشد اما برای طراحی اشکال گرافیکی وکتور بسیار سودمند هستند.