تاثیر برداری در CSS
کتابخانه CSS امکانات زیادی برای طراحی و زیباسازی صفحات وب ارائه می‌دهد و یکی از ویژگی‌های جالب آن «تاثیر برداری» یا vector-effect است. این ویژگی، به ما این امکان را می‌دهد که اشکالی را که به شکل ویدجت SVG تعریف می‌شوند، بهتر و زیباتر نمایش دهیم. با استفاده از این خصوصیت، می‌توانیم برای شکل‌ها یا تصاویر SVG چندین تاثیر مختلف در نظر بگیریم.
ویژگی vector-effect به طور ویژه در طراحی گرافیک‌های دو بعدی و رسم خطوط کاربرد دارد. به عنوان مثال، اگر ما بخواهیم یک خط با ضخامت یکنواخت رسم کنیم، می‌توانیم از این ویژگی بهره ببریم. این خاصیت به ما این امکان را می‌دهد که نحوه نمایش شکل‌ها را کنترل کنیم. به این ترتیب، می‌توانیم به طراحی‌هامان ظاهری حرفه‌ای و مدرن ببخشیم.
فراموش نکنید که این خصوصیت بیشتر در طراحی‌های لوگو یا اشکال پیچیده استفاده می‌شود، جایی که واضح بودن تصویر اهمیت بالایی دارد. با کمک vector-effect می‌توانیم از کیفیت و وضوح تصاویر اجتناب ناپذیری که در مقیاس‌های بزرگ مورد استفاده قرار می‌گیرند، اطمینان حاصل کنیم.
به طور کلی، استفاده از این خاصیت در CSS به شما این امکان را می‌دهد که طراح‌های خلاقانه‌تری داشته باشید و عناصر خویش را به صورت بهینه، زیبا و کارآمد نمایش دهید. در ادامه، مثال‌هایی را برای شما قرار می‌دهیم تا با نحوه کارکرد این ویژگی آشنا شوید.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" vector-effect="non-scaling-stroke" />
</svg>
توضیحات کد
1. <svg width="100" height="100">ابتدا ما یک عنصر SVG با عرض و ارتفاع ۱۰۰ پیکسل ایجاد می کنیم.
2. <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" vector-effect="non-scaling-stroke" />در اینجا، یک دایره در وسط SVG با شعاع ۴۰ پیکسل رسم می‌کنیم. stroke برای تعیین رنگ لبه و fill برای تعیین رنگ داخل دایره استفاده می‌شود. ویژگی
vector-effect با مقدار non-scaling-stroke تضمین می‌کند که لبه‌های دایره در صورت تغییر اندازه SVG، با کیفیت یکنواخت باقی بماند.3. </svg>در نهایت، تگ بسته SVG را قرار می‌دهیم.