SVG در طراحی سایت

  • مرداد ۷, ۱۳۹۴

SVG در طراحی سایت رسپانسیو بسیار مناسب می باشد زیرا کاربر به کمک آن می تواند یک تصویر مقیاس پذیر برای سایتش طراحی کند که با تغییر رزولوشن مرور گر در کیفیت آن اشکالی بوجود نیاید .
در ادامه نگاهی می اندازیم به چگونگی استفاده از SVG در طراحی سایت ریسپانسیو ؛ با اینتن همراه باشید.

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>

SVG در طراحی سایت

همانطور که مشاهده می کنید ، در مثال بالا ما ابتدا نوع دایره را مشخص کرده و سایز آن را تنظیم نموده ایم . این کارها به مرورگر اعلام می کند که ما قصد داریم از یک طیف رنگ سفارشی (در اینجا زرد و بنفش) برای پر کردن داخل دایره استفاده نماییم .

به یاد داشته باشید که فایل را با فرمت XHTML ذخیره نمایید تا از سازگاری آن با مرورگرها اطمینان یابید .
همچنین شما می توانید تصاویر مختلفی منند خط ، مستطیل ، بیضی ، چندضلعی و… را توسط  SVG در طراحی سایت ترسیم نمایید .

با اینتن بروز باشید…

مشاوره رایگان طراحی سایت

مشاوره طراحی سایت

در صورتی که به دنبال راه اندازی کسب و کار خود در دنیای اینترنت هستید . عدد 21 را به شماره 09107585955 پیامک نمایید یا در لینک زیر فرم درخواست مشاوره را پر نمایید تا مشاوران اینتن با شما در تماس باشند . با اینتن بروز باشید.

بدون نظر
 

پیام بگذارید