رسپانسیو بسیار مناسب می باشد زیرا کاربر
به کمک آن می تواند یک تصویر مقیاس پذیر برای سایتش طراحی کند که با تغییر
رزولوشن مرور گر در کیفیت آن اشکالی بوجود نیاید .
در ادامه نگاهی می اندازیم به چگونگی استفاده از SVG در طراحی سایت ریسپانسیو ؛ با اینتن همراه باشید.
معرفی SVG در طراحی سایت :
به کمک SVG در طراحی سایت شما می توانید مستقیما در مرورگر خود طرح های گرافیکی پیاده سازی نمایید .
شما برای استفاده از SVG در طراحی سایت به اطلاعاتی درباره HTML5 ، CSS و
همچنین اطلاعاتی راجع به جاوا اسکریپت جهت ایجاد تغیییرات در مرورگر نیاز
دارید . همچنین اگر شما با جاوا اسکریپت آشنایی نداشته باشید ، کتابخانه
های جاوا برای کمک به شما در دسترس است .
SVG در طراحی سایت توسط پهنه وسیعی از مرورگرها پشتیبانی می شود . عدم وابستگی آن به رزولوشن ، آن را برای طراحی سایت ریسپانسیو ایده آل می کند.
مثالی از ساخت یک تصویر SVG در طراحی سایت :
برای این منظور می توانید از کدهای زیر استفاده نمایید :
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG Exercise 2</title>
</head>
<body>
<h1>HTML5 SVG Exercise 2</h1>
<svg id=”Gcircle” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<defs><linearGradient id=”MyGradient”>
<stop offset=”10%” stop-color=”yellow” />
<stop offset=”90%” stop-color=”blue” />
</linearGradient></defs>
<circle id=”Gcircle” cx=”100″ cy=”100″ r=”100″ fill=”url(#MyGradient)” />\
</svg>
</body>
</html>
همانطور که مشاهده می کنید ، در مثال بالا ما ابتدا نوع دایره را مشخص کرده و سایز آن را تنظیم نموده ایم . این کارها به مرورگر اعلام می کند که ما قصد داریم از یک طیف رنگ سفارشی (در اینجا زرد و بنفش) برای پر کردن داخل دایره استفاده نماییم .
به یاد داشته باشید که فایل را با فرمت XHTML ذخیره نمایید تا از سازگاری آن با مرورگرها اطمینان یابید .
همچنین شما می توانید تصاویر مختلفی منند خط ، مستطیل ، بیضی ، چندضلعی و… را توسط SVG در طراحی سایت ترسیم نمایید .
با اینتن بروز باشید…
