SVGcode: রাস্টার ছবিগুলিকে SVG ভেক্টর গ্রাফিক্সে রূপান্তর করার জন্য একটি PWA

SVGcode হল একটি প্রগতিশীল ওয়েব অ্যাপ যা আপনাকে JPG, PNG, GIF, WebP, AVIF ইত্যাদি রাস্টার ছবিগুলিকে SVG ফর্ম্যাটে ভেক্টর গ্রাফিক্সে রূপান্তর করতে দেয়৷ এটি ফাইল সিস্টেম অ্যাক্সেস API, Async ক্লিপবোর্ড API, ফাইল হ্যান্ডলিং API, এবং উইন্ডো নিয়ন্ত্রণ ওভারলে কাস্টমাইজেশন ব্যবহার করে।

টমাস স্টেইনার

(আপনি যদি পড়ার চেয়ে দেখতে পছন্দ করেন তবে এই নিবন্ধটি ভিডিও হিসাবেও উপলব্ধ।)

রাস্টার থেকে ভেক্টর পর্যন্ত

আপনি কি কখনও একটি ইমেজ স্কেল করেছেন এবং ফলাফলটি পিক্সেলেটেড এবং অসন্তোষজনক ছিল? যদি তাই হয়, আপনি সম্ভবত WebP, PNG, বা JPG এর মতো রাস্টার ইমেজ ফরম্যাট নিয়ে কাজ করেছেন।

একটি রাস্টার চিত্রকে স্কেল করা এটিকে পিক্সেলেড দেখায়।

বিপরীতে, ভেক্টর গ্রাফিক্স হল এমন চিত্র যা একটি স্থানাঙ্ক সিস্টেমের বিন্দু দ্বারা সংজ্ঞায়িত করা হয়। এই বিন্দুগুলি রেখা এবং বক্ররেখা দ্বারা সংযুক্ত হয়ে বহুভুজ এবং অন্যান্য আকার তৈরি করে। রাস্টার গ্রাফিক্সের তুলনায় ভেক্টর গ্রাফিক্সের একটি সুবিধা রয়েছে যেগুলি পিক্সেলেশন ছাড়াই যেকোন রেজোলিউশনে উপরে বা নিচের দিকে স্কেল করা যেতে পারে।

গুণমানের কোন ক্ষতি ছাড়াই একটি ভেক্টর চিত্রকে স্কেল করা।

SVGcode প্রবর্তন করা হচ্ছে

আমি SVGcode নামে একটি PWA তৈরি করেছি যা আপনাকে রাস্টার চিত্রগুলিকে ভেক্টরে রূপান্তর করতে সহায়তা করতে পারে। ক্রেডিট যেখানে ক্রেডিট বকেয়া: আমি এটি উদ্ভাবন করিনি। SVGcode-এর সাহায্যে, আমি শুধু পিটার সেলিংগারের পোট্রেস নামক একটি কমান্ড লাইন টুলের কাঁধে দাঁড়িয়ে আছি যেটিকে আমি ওয়েব অ্যাসেম্বলিতে রূপান্তর করেছি, তাই এটি একটি ওয়েব অ্যাপে ব্যবহার করা যেতে পারে।

SVGcode অ্যাপ্লিকেশন স্ক্রিনশট।
SVGcode অ্যাপ।

SVGcode ব্যবহার করে

প্রথমে, আমি আপনাকে দেখাতে চাই কিভাবে অ্যাপটি ব্যবহার করতে হয়। আমি ক্রোম ডেভ সামিটের টিজার ইমেজ দিয়ে শুরু করছি যা আমি ChromiumDev Twitter চ্যানেল থেকে ডাউনলোড করেছি। এটি একটি PNG রাস্টার চিত্র যা আমি তারপর SVGcode অ্যাপে টেনে আনব। যখন আমি ফাইলটি ড্রপ করি, ইনপুটের একটি ভেক্টরাইজড সংস্করণ উপস্থিত না হওয়া পর্যন্ত অ্যাপটি রঙের দ্বারা চিত্রের রঙকে ট্রেস করে। আমি এখন চিত্রটি জুম করতে পারি, এবং আপনি দেখতে পাচ্ছেন, প্রান্তগুলি তীক্ষ্ণ থাকে। কিন্তু ক্রোম লোগোতে জুম ইন করে, আপনি দেখতে পারেন যে ট্রেসিংটি নিখুঁত ছিল না এবং বিশেষ করে লোগোটির রূপরেখা কিছুটা দাগযুক্ত দেখায়। আমি পাঁচ পিক্সেল পর্যন্ত দাগ দমন করে ট্রেসিং ডি-স্পেকলিং করে ফলাফল উন্নত করতে পারি।

একটি বাদ দেওয়া ছবিকে SVG-তে রূপান্তর করা হচ্ছে।

এসভিজিকোডে পোস্টারাইজেশন

ভেক্টরাইজেশনের জন্য একটি গুরুত্বপূর্ণ পদক্ষেপ, বিশেষ করে ফটোগ্রাফিক ছবির জন্য, রঙের সংখ্যা কমাতে ইনপুট ইমেজ পোস্টারাইজ করা। SVGcode আমাকে প্রতি রঙের চ্যানেলে এটি করতে দেয় এবং আমি পরিবর্তন করার সাথে সাথে ফলাফল SVG দেখতে পারি। যখন আমি ফলাফলে খুশি হই, আমি আমার হার্ড ডিস্কে SVG সংরক্ষণ করতে পারি এবং যেখানে খুশি ব্যবহার করতে পারি।

রঙের সংখ্যা কমাতে একটি ছবি পোস্টারাইজ করা।

এসভিজিকোডে ব্যবহৃত API

এখন আপনি দেখেছেন যে অ্যাপটি কী সক্ষম, আমি আপনাকে এমন কিছু API দেখাই যা যাদুটি ঘটতে সহায়তা করে।

প্রগতিশীল ওয়েব অ্যাপ

SVGcode একটি ইনস্টলযোগ্য প্রগতিশীল ওয়েব অ্যাপ এবং তাই সম্পূর্ণ অফলাইন সক্ষম৷ অ্যাপটি Vite.js- এর জন্য ভ্যানিলা JS টেমপ্লেটের উপর ভিত্তি করে এবং জনপ্রিয় Vite প্লাগইন PWA ব্যবহার করে, যা একটি পরিষেবা কর্মী তৈরি করে যা হুডের নিচে Workbox.js ব্যবহার করে। ওয়ার্কবক্স হল লাইব্রেরির একটি সেট যা প্রোগ্রেসিভ ওয়েব অ্যাপসের জন্য প্রোডাকশন-প্রস্তুত পরিষেবা কর্মীকে শক্তি দিতে পারে, এই প্যাটার্নটি অগত্যা সমস্ত অ্যাপের জন্য কাজ নাও করতে পারে, কিন্তু SVGcode-এর ব্যবহারের ক্ষেত্রে এটি দুর্দান্ত।

উইন্ডো নিয়ন্ত্রণ ওভারলে

উপলব্ধ স্ক্রীন রিয়েল এস্টেটকে সর্বাধিক করার জন্য, SVGcode এর প্রধান মেনুটিকে শিরোনামবার এলাকায় নিয়ে গিয়ে উইন্ডো কন্ট্রোল ওভারলে কাস্টমাইজেশন ব্যবহার করে। আপনি এটি ইনস্টল ফ্লো শেষে সক্রিয় হতে দেখতে পারেন।

SVGcode ইনস্টল করা এবং উইন্ডো কন্ট্রোল ওভারলে কাস্টমাইজেশন সক্রিয় করা।

ফাইল সিস্টেম অ্যাক্সেস API

ইনপুট ইমেজ ফাইল খুলতে এবং ফলস্বরূপ এসভিজি সংরক্ষণ করতে, আমি ফাইল সিস্টেম অ্যাক্সেস API ব্যবহার করি। এটি আমাকে পূর্বে খোলা ফাইলগুলির একটি রেফারেন্স রাখতে এবং একটি অ্যাপ পুনরায় লোড করার পরেও আমি যেখানে ছেড়েছি সেখানে চালিয়ে যেতে দেয়। যখনই একটি ছবি সংরক্ষণ করা হয়, এটি svgo লাইব্রেরির মাধ্যমে অপ্টিমাইজ করা হয়, যা SVG-এর জটিলতার উপর নির্ভর করে একটি মুহূর্ত সময় নিতে পারে। ফাইল সংরক্ষণ ডায়ালগ দেখানোর জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন। তাই SVG অপ্টিমাইজেশান হওয়ার আগে ফাইল হ্যান্ডেলটি প্রাপ্ত করা গুরুত্বপূর্ণ, তাই অপ্টিমাইজ করা SVG প্রস্তুত হওয়ার সময় ব্যবহারকারীর অঙ্গভঙ্গিটি অবৈধ হয়ে যায় না৷

try {
  let svg = svgOutput.innerHTML;
  let handle = null;
  // To not consume the user gesture obtain the handle before preparing the
  // blob, which may take longer.
  if (supported) {
    handle = await showSaveFilePicker({
      types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
    });
  }
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  showToast(i18n.t('savedSVG'));
  const blob = new Blob([svg], {type: 'image/svg+xml'});
  await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
  console.error(err.name, err.message);
  showToast(err.message);
}

টানা এবং পতন

একটি ইনপুট ইমেজ খোলার জন্য, আমি হয় ফাইল ওপেন বৈশিষ্ট্যটি ব্যবহার করতে পারি, অথবা, যেমন আপনি উপরে দেখেছেন, শুধুমাত্র একটি ইমেজ ফাইল অ্যাপে টেনে আনুন এবং ড্রপ করুন। ফাইল খোলার বৈশিষ্ট্যটি বেশ সহজবোধ্য, আরও আকর্ষণীয় হল ড্র্যাগ এবং ড্রপ কেস। এটি সম্পর্কে বিশেষত চমৎকার যা হল যে আপনি getAsFileSystemHandle() পদ্ধতির মাধ্যমে ডেটা স্থানান্তর আইটেম থেকে একটি ফাইল সিস্টেম হ্যান্ডেল পেতে পারেন। যেমন আগে উল্লেখ করা হয়েছে, আমি এই হ্যান্ডেলটি ধরে রাখতে পারি, তাই অ্যাপটি পুনরায় লোড হলে এটি প্রস্তুত।

document.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropContainer.classList.remove('dropenter');
  const item = event.dataTransfer.items[0];
  if (item.kind === 'file') {
    inputImage.addEventListener(
      'load',
      () => {
        URL.revokeObjectURL(blobURL);
      },
      {once: true},
    );
    const handle = await item.getAsFileSystemHandle();
    if (handle.kind !== 'file') {
      return;
    }
    const file = await handle.getFile();
    const blobURL = URL.createObjectURL(file);
    inputImage.src = blobURL;
    await set(FILE_HANDLE, handle);
  }
});

আরও বিশদ বিবরণের জন্য, ফাইল সিস্টেম অ্যাক্সেস API- এর নিবন্ধটি দেখুন এবং, যদি আপনি আগ্রহী হন, src/js/filesystem.js এ SVGcode সোর্স কোডটি অধ্যয়ন করুন।

Async ক্লিপবোর্ড API

Async ক্লিপবোর্ড API এর মাধ্যমে SVGcode অপারেটিং সিস্টেমের ক্লিপবোর্ডের সাথে সম্পূর্ণরূপে একত্রিত। আপনি অপারেটিং সিস্টেমের ফাইল এক্সপ্লোরার থেকে পেস্ট ইমেজ বোতামে ক্লিক করে বা আপনার কীবোর্ডে কমান্ড বা কন্ট্রোল প্লাস ভি টিপে অ্যাপে ছবি পেস্ট করতে পারেন।

ফাইল এক্সপ্লোরার থেকে SVGcode এ একটি ছবি আটকানো হচ্ছে।

Async ক্লিপবোর্ড API সম্প্রতি SVG চিত্রগুলির সাথেও মোকাবিলা করার ক্ষমতা অর্জন করেছে, তাই আপনি একটি SVG চিত্র অনুলিপি করতে এবং আরও প্রক্রিয়াকরণের জন্য এটিকে অন্য অ্যাপ্লিকেশনে পেস্ট করতে পারেন৷

SVGcode থেকে SVGOMG-এ একটি ছবি কপি করা হচ্ছে।
copyButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  const textBlob = new Blob([svg], {type: 'text/plain'});
  const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
  navigator.clipboard.write([
    new ClipboardItem({
      [svgBlob.type]: svgBlob,
      [textBlob.type]: textBlob,
    }),
  ]);
  showToast(i18n.t('copiedSVG'));
});

আরও জানতে, Async ক্লিপবোর্ড নিবন্ধটি পড়ুন, অথবা src/js/clipboard.js ফাইলটি দেখুন।

ফাইল হ্যান্ডলিং

SVGcode এর আমার প্রিয় বৈশিষ্ট্যগুলির মধ্যে একটি হল এটি অপারেটিং সিস্টেমের সাথে কতটা ভালভাবে মিশে যায়। একটি ইনস্টল করা PWA হিসাবে, এটি ইমেজ ফাইলগুলির জন্য একটি ফাইল হ্যান্ডলার বা এমনকি ডিফল্ট ফাইল হ্যান্ডলার হতে পারে। এর মানে হল যে যখন আমি আমার macOS মেশিনে ফাইন্ডারে থাকি, তখন আমি একটি ছবিতে রাইট-ক্লিক করতে পারি এবং SVGcode দিয়ে খুলতে পারি। এই বৈশিষ্ট্যটিকে ফাইল হ্যান্ডলিং বলা হয় এবং এটি ওয়েব অ্যাপ ম্যানিফেস্ট এবং লঞ্চ সারিতে ফাইল_হ্যান্ডলার সম্পত্তির উপর ভিত্তি করে কাজ করে, যা অ্যাপটিকে পাস করা ফাইলটি ব্যবহার করতে দেয়।

ইনস্টল করা SVGcode অ্যাপের মাধ্যমে ডেস্কটপ থেকে একটি ফাইল খোলা হচ্ছে।
window.launchQueue.setConsumer(async (launchParams) => {
  if (!launchParams.files.length) {
    return;
  }
  for (const handle of launchParams.files) {
    const file = await handle.getFile();
    if (file.type.startsWith('image/')) {
      const blobURL = URL.createObjectURL(file);
      inputImage.addEventListener(
        'load',
        () => {
          URL.revokeObjectURL(blobURL);
        },
        {once: true},
      );
      inputImage.src = blobURL;
      await set(FILE_HANDLE, handle);
      return;
    }
  }
});

আরও তথ্যের জন্য, ইনস্টল করা ওয়েব অ্যাপ্লিকেশনগুলিকে ফাইল হ্যান্ডলার হতে দিন এবং src/js/filehandling.js এ সোর্স কোড দেখুন।

ওয়েব শেয়ার (ফাইল)

অপারেটিং সিস্টেমের সাথে মিশে যাওয়ার আরেকটি উদাহরণ হল অ্যাপের শেয়ার বৈশিষ্ট্য। ধরে নিচ্ছি যে আমি এসভিজি কোড দিয়ে তৈরি একটি এসভিজিতে সম্পাদনা করতে চাই, এটির সাথে মোকাবিলা করার একটি উপায় হ'ল ফাইলটি সংরক্ষণ করা, এসভিজি সম্পাদনা অ্যাপ চালু করা এবং তারপরে সেখান থেকে এসভিজি ফাইলটি খুলুন। একটি মসৃণ প্রবাহ, যদিও, ওয়েব শেয়ার API ব্যবহার করা, যা ফাইলগুলিকে সরাসরি শেয়ার করার অনুমতি দেয়। তাই যদি SVG সম্পাদনা অ্যাপটি একটি শেয়ার টার্গেট হয়, তবে এটি বিচ্যুতি ছাড়াই সরাসরি ফাইলটি গ্রহণ করতে পারে।

shareSVGButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  svg = await optimizeSVG(svg);
  const suggestedFileName =
    getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
  const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
  const data = {
    files: [file],
  };
  if (navigator.canShare(data)) {
    try {
      await navigator.share(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err.name, err.message);
      }
    }
  }
});
জিমেইলে একটি SVG ছবি শেয়ার করা।

ওয়েব শেয়ার টার্গেট (ফাইল)

অন্যভাবে, SVGcode শেয়ার টার্গেট হিসাবেও কাজ করতে পারে এবং অন্যান্য অ্যাপ থেকে ফাইল গ্রহণ করতে পারে। এই কাজটি করার জন্য, অ্যাপটিকে ওয়েব শেয়ার টার্গেট API- এর মাধ্যমে অপারেটিং সিস্টেমকে জানাতে হবে যে এটি কী ধরনের ডেটা গ্রহণ করতে পারে। এটি ওয়েব অ্যাপ ম্যানিফেস্টের একটি ডেডিকেটেড ফিল্ডের মাধ্যমে ঘটে।

{
  "share_target": {
    "action": "https://svgco.de/share-target/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "image",
          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
        }
      ]
    }
  }
}

action রুটটি প্রকৃতপক্ষে বিদ্যমান নেই, তবে পরিষেবা কর্মীর fetch হ্যান্ডলারে বিশুদ্ধভাবে পরিচালনা করা হয়, যা অ্যাপে প্রকৃত প্রক্রিয়াকরণের জন্য প্রাপ্ত ফাইলগুলিকে পাস করে।

self.addEventListener('fetch', (fetchEvent) => {
  if (
    fetchEvent.request.url.endsWith('/share-target/') &&
    fetchEvent.request.method === 'POST'
  ) {
    return fetchEvent.respondWith(
      (async () => {
        const formData = await fetchEvent.request.formData();
        const image = formData.get('image');
        const keys = await caches.keys();
        const mediaCache = await caches.open(
          keys.filter((key) => key.startsWith('media'))[0],
        );
        await mediaCache.put('shared-image', new Response(image));
        return Response.redirect('./?share-target', 303);
      })(),
    );
  }
});
SVGcode-এ একটি স্ক্রিনশট শেয়ার করা হচ্ছে।

উপসংহার

ঠিক আছে, এটি SVGcode-এর কিছু উন্নত অ্যাপ বৈশিষ্ট্যের মাধ্যমে একটি দ্রুত সফর। আমি আশা করি এই অ্যাপটি Squosh বা SVGOMG-এর মতো অন্যান্য আশ্চর্যজনক অ্যাপের পাশাপাশি আপনার ইমেজ প্রসেসিং প্রয়োজনের জন্য একটি অপরিহার্য টুল হয়ে উঠতে পারে।

SVGcode svgco.de এ উপলব্ধ। দেখুন আমি সেখানে কি করেছি? আপনি GitHub এ এর ​​সোর্স কোড পর্যালোচনা করতে পারেন। মনে রাখবেন যেহেতু পোট্রেস জিপিএল-লাইসেন্সযুক্ত, তাই এসভিজিকোডও। এবং যে সঙ্গে, খুশি vectorizing! আমি আশা করি SVGcode দরকারী হবে, এবং এর কিছু বৈশিষ্ট্য আপনার পরবর্তী অ্যাপটিকে অনুপ্রাণিত করতে পারে।

স্বীকৃতি

এই নিবন্ধটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে।