SVG فائل - آپ کی ویب سائٹ کے لیے PNG، JPEG کا بہترین امیج فائل فارمیٹ متبادل

آپ کی ویب سائٹ میں بہت ساری تصاویر شامل ہیں جن میں پروڈکٹس، مجموعوں اور شبیہیں شامل ہیں، بالکل دوسری سائٹوں کی طرح، ان میں سے زیادہ تر PNG یا JPEG امیج فارمیٹس ہیں۔ لیکن آپ نے پایا کہ جتنی زیادہ PNG یا JPEG تصاویر اپ لوڈ کی جائیں گی، آپ کی ویب سائٹ اتنی ہی آہستہ آہستہ لوڈ ہوگی۔ اگر یہ آپ کا معاملہ ہے، تو یہ وقت ہے کہ کچھ تصویری اقسام جیسے SVG فارمیٹ والے آئیکنز کے لیے امیج آپٹیمائزیشن کے بارے میں سوچیں۔

PNG اور JPEG کے مقابلے میں، SVG فائلوں میں تصاویر کے اعلی ریزولوشن کو برقرار رکھتے ہوئے آپ کی لوڈنگ کی رفتار کو بڑھانے کے فوائد ہیں۔ آئیے اس مضمون کے ذریعے SVG فائلوں کے بارے میں بہترین چیزیں اور آپ کو اپنی ویب سائٹ کی کارکردگی کو بڑھانے کے لیے ان کا استعمال کیوں کرنا چاہیے۔

اس صفحہ پر

SVG فائل کیا ہے؟

دیگر مشہور تصویری فائلوں جیسے کہ PNG یا JPEG کے برعکس، SVG (Scalable Vector Graphics) ایک ویکٹر پر مبنی امیج فارمیٹ ہے اور معیار کو کھونے کے بغیر اسے چھوٹا یا بڑا کیا جا سکتا ہے۔ SVG فائلوں کو سمجھنے کے لیے، شاید ہم ان کی خصوصیات کا بڑے پیمانے پر استعمال ہونے والے فارمیٹ PNG سے موازنہ کریں گے۔

ایس وی جی پی این جی
فائل کی قسم ویکٹر پر مبنی راسٹر پر مبنی (یا پکسل پر مبنی)
فائل کا ناپ PNG سے بہت چھوٹا ہائی-ریز کے ساتھ بڑا
یہ کیسے کام کرتا ہے تصویر دکھانے کے لیے ویب براؤزر یا ایپلیکیشنز کے ساتھ بات چیت کرنے کے لیے XML پروگرامنگ زبان کا استعمال کریں۔ کمپریسڈ امیج کو ماخذ کی تصویر کی طرح ظاہر کرنے کے لیے فلٹرنگ، انکوڈنگ اور نقصان کے بغیر کمپریشن کے عمل سے گزریں۔
کے لیے بہترین استعمال کیا جاتا ہے۔ ویب سائٹ ڈیزائن، لوگو، آئیکن تصاویر، ترمیم، اور لوگو

آپ کو SVG فائلوں کو استعمال کرنے کی ضرورت کیوں ہے۔

SVG فارمیٹ کے بہت سے شاندار فوائد ہیں جو اسے ویب سائٹ اور ایپلیکیشن ڈیزائن کے لیے بہترین انتخاب میں بدل دیتے ہیں۔

  1. لامحدود اسکیل ایبلٹی

    ویکٹر استعمال کرنے کی وجہ سے، SVG تصاویر معیار سے متاثر ہوئے بغیر کسی بھی جہت پر ریزولیوشن سے آزاد اور توسیع پذیر ہیں۔ تصویر بنانے کے لیے ریاضیاتی الگورتھم کی بنیاد پر، ویب براؤزر اسے پڑھے گا اور اسکرین پر دکھائے گا۔ صرف ایک چھوٹا کوڈ اور مختلف ناظرین کے مطابق ڈھال سکتا ہے جیسے کہ ڈسپلے ونڈوز، ڈیوائسز، ریسپانسیو ڈیزائنز، وغیرہ، SVG فارمیٹ آپ کی تصاویر کے لیے معیار کے نقصان کے بغیر مکمل طور پر اسکرین پر ظاہر ہونا آسان ہے۔

    یہ خصوصیت SVG کو راسٹر پر مبنی فائل کی اقسام جیسے PNG یا JPEG سے برتر بناتی ہے۔ جہاں تک راسٹر امیجز کا تعلق ہے، تصویر کی معلومات پکسلز کے گرڈ میں محفوظ کی جاتی ہیں۔ لہذا، جب ہم تصویر کو بڑا کرتے ہیں، تو ہر پکسل کو اس کے اصل سائز سے آگے بڑھنا پڑتا ہے اور اس کی وجہ سے معیار میں کمی آتی ہے۔

  2. آسان حسب ضرورت

    SVG فائلیں ویب ڈیزائنرز کو کچھ مقبول ڈیزائن سافٹ ویئر جیسے ایڈوب السٹریٹر یا کورل ڈرا وغیرہ کے ساتھ ویکٹر کی شکلیں، متن، رنگوں میں ترمیم کرنے کے لیے بہت زیادہ کنٹرول دیتی ہیں۔ تصویری فائل کو صرف چند منٹوں میں ایڈٹ کیا جاتا ہے۔

  3. چھوٹا سائز

    جیسا کہ ذکر کیا گیا ہے، ایک SVG فائل راسٹر امیج سے بہت ہلکی ہوتی ہے اور اس سے زیادہ، آپ کو چھوٹے سائز اور تصویر کے معیار کے درمیان تجارت کرنے کی ضرورت نہیں ہے۔ جتنی چھوٹی تصاویر ہوں گی، آپ کی ویب سائٹ اتنی ہی تیزی سے لوڈ ہوگی۔ لہذا، SVGs مجموعی طور پر آپ کی ویب سائٹ کی لوڈنگ کی رفتار کو بہتر بنا سکتے ہیں۔

  4. SEO دوستانہ

    جیسا کہ ایس وی جی فارمیٹ کی وضاحت متن کی بنیاد پر کی گئی ہے، سرچ انجن تصاویر کو زیادہ تیزی اور آسانی سے پڑھ سکتا ہے، کرال اور انڈیکس کر سکتا ہے۔ لہذا، آپ اپنے صفحہ کی درجہ بندی اور سرچ انجن کی اصلاح کو بہتر بنا سکتے ہیں۔ اس سلسلے میں SVGs کا وزن PNGs یا JPEGs سے زیادہ ہے کیونکہ سرچ انجن صرف راسٹر امیجز کو اپنے میٹا ڈیٹا کے مطابق پہچانتے ہیں جیسے کہ عنوان، کلیدی الفاظ یا ALT ٹیگ۔

اب، زیادہ تر ویب سائٹ تھیم فراہم کرنے والے عوامل کو ترجیح دینا چاہتے ہیں جیسے کہ تیز رفتار لوڈ، ہائی-ریز امیجز اور سرچ انجنوں پر اعلیٰ درجہ۔ خاص طور پر، کچھ Shopify تھیمز جیسے Be Yours، کچھ ایسے حصوں یا بلاکس کو نامزد کریں گے جہاں صرف SVGs کو قبول کیا جاتا ہے۔ لہذا اس معاملے میں PNGs یا JPEGs پر SVGs کا انتخاب کرنے کی سفارش کی جاتی ہے۔

Be Yours تھیم میں SVG کا استعمال

اس مضمون میں دی گئی ہدایات کے مطابق Adobe Photoshop یا Adobe Illustrator جیسی عام گرافک ڈیزائن ایپس کے ذریعے SVG فائل خود بنائی جا سکتی ہے۔

اگر خود سے SVG بنانا پیچیدہ ہے، تو آپ کی زندگی کو آسان بنانے کے لیے ہمارے پاس SVG آئیکن فراہم کنندہ، Remixicon.com ہے۔ Remixicon.com کے پاس آپ کے انتخاب کے لیے ایک بہت بڑی SVG آئیکن لائبریری ہے اور آپ آسانی سے کوئی بھی آئیکن حاصل کر سکتے ہیں جیسا کہ آپ چاہتے ہیں صرف دو کلکس میں:

  1. Remixicon.com پر، مطلوبہ آئیکن تلاش کرنے کے لیے ایک کلیدی لفظ ٹائپ کریں۔
  2. فہرست سے آئیکن پر کلک کریں اور کاپی ایس وی جی بٹن کو منتخب کریں۔

  3. اپنی تھیم کے سیکشن/بلاک تک رسائی حاصل کریں جہاں آپ ایک SVG آئیکن شامل کرنا چاہتے ہیں اور SVG امیج کوڈ کو متعلقہ فیلڈ میں چسپاں کریں۔

    مثال کے طور پر، Be Yours تھیم میں، آپ کے پاس گارنٹی سیکشن ہے جو آپ کو اپنی مرضی کے SVG کو فیلڈ میں Custom SVG آئیکن شامل کرنے کی اجازت دیتا ہے۔

  4. اپنی تبدیلی کی تصدیق کے لیے محفوظ کریں پر کلک کریں۔

آپ کے پڑھنے کے وقت کا شکریہ۔ ہم امید کرتے ہیں کہ آپ کو یہ مضمون مفید لگے گا۔ ہماری تازہ ترین اپ ڈیٹس حاصل کرنے کے لیے آج ہی ہمیں Facebook ، Twitter اور ویب سائٹ بلاگ پر فالو کریں!

واپس خبریں پر