+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: آموزش (/forum-25.html)
+--- انجمن: آموزش های کاربردی (/forum-109.html)
+--- موضوع: {كاربردي} استفاده از تصاویر با فرمت SVG (/thread-16305.html)
استفاده از تصاویر با فرمت SVG - mahan - ۲۰-۷-۱۳۹۳ ۰۷:۲۰ صبح
استفاده از تصاویر پشت زمینه (بک گراند) با فرمت SVG به جای فرمت هایی معمول همچون JPG و GIF
چرا باید از تصاویر با فرمت SVG استفاده کنیم؟
فرض می کنم شما می خواهید برای صفحه اول سایت خود یک بک گراند ایجاد کنید که دارای کیفیت مناسب باشد و در آن هیچ گونه رنجه (نقاط شطرنجی) دیده نشود، بنابراین طبق شیوه معمول باید یک تصویر با ابعاد 1024*768 و یا 800*600 و یا اندازه هایی از این دست ایجاد کنید
قطعا هر چه قدر ابعاد تصویر بزرگتر شود در نهایت تصویری با وضوح بالا به دست می آید، اما یک اشکال کوچک وجود دارد و آن هم حجم تصاویر است که با اضافه شدن تعداد پیکسل ها (اندازه تصویر) آن هم اضافه می شود!
راه حل چیست؟
استفاده از تصاویر با فرمت SVG
مزیت استفاده از تصویر با فرمت SVG چیست؟
فرض می کنم شما یک تصویر 50*50 پیکس را در برنامه Adobe Illustrator ایجاد کرده اید و می خواهید آنرا به یک اندازه بزرکتر تبدیل کنید
این فرمت از تصویر، این قابلیت را به شما می دهد که تصویر مورد نظر را به هر اندازه که دوست دارید بزرگ کنید، بدون افت کیفیت و افزایش حجم و در نهایت بارگزاری سریعتر و بهتر در سایت.
برنامه های همچون Adobe Illustrator چون به صورت برداری تصویر را ایجاد می کنند، بنابراین بزرگ کردن آیتم مورد نظر، تأثیری در افزایش حجم ندارد.
مزیت دیگر فرمت SVG قابلیت ترانسپرنسی این فرمت است!
ترانسپرنسی یعنی این که زمینه تصویر ما هیچ رنگی نداشته باشد، یعنی اگر یک بخشی از تصویر را بر روی تصویر دیگر قرار دادیم زمینه تصویر اول دیده شود.
مورد دیگر استفاده از فرمت SVG در لوگو، هدر سایت و دایوهایی که به صورت شناور در سایت قرار داده می شود است
برای مثال به تصویر پیوست دقت کنید که لوگو به صورت ترانسپرنسی در موقعیت شناور قرا گرفته و هیچ زمینه ای ندارد و از همه مهمتر هیچ افت کیفیتی وجود ندارد، حتی در خط دور نوشته!
[attachment=7466]
شاد باشید و شادی بخش دیگران