تحويل Data URI مرة أخرى إلى SVG قابل للتحرير

تحويل Data URI مرة أخرى إلى SVG قابل للتحرير

تكون SVG Data URI مفيدة عند تضمين أيقونة صغيرة داخل HTML أو CSS. لكن عندما ترث سلسلة طويلة مثل data:image/svg+xml... وتريد استعادة ملف SVG قابل للتحرير، فأنت تحتاج إلى خطوات دقيقة.

القاعدة الآمنة: افصل السلسلة عند أول فاصلة، وفك ترميز الجزء الذي بعدها فقط، ثم تحقق من SVG قبل حفظه. يستند هذا الدليل إلى نقاش عملي في Stack Overflow: Converting a data URI back to SVG.

تعرف على الصيغة

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
data:image/svg+xml,%3Csvg%20xmlns%3D%22http...

ما قبل الفاصلة يصف نوع MIME وطريقة الترميز. ما بعد الفاصلة هو محتوى SVG المشفر.

فك ترميز Base64

function dataUriBase64ToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return new TextDecoder().decode(
    Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
  );
}

يساعد TextDecoder على حفظ نص UTF-8 والرموز والبيانات الوصفية بشكل أفضل من افتراض ASCII.

فك ترميز URL encoding

function dataUriEncodedToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return decodeURIComponent(payload);
}

تظهر هذه الصيغة كثيرا في CSS backgrounds، لأنها قد تكون أقصر وأسهل في المراجعة للأيقونات البسيطة.

دالة عامة آمنة

function dataUriToSvg(dataUri) {
  const [header, payload] = dataUri.split(",", 2);

  if (!header?.startsWith("data:image/svg+xml") || !payload) {
    throw new Error("Expected an SVG Data URI");
  }

  if (header.includes(";base64")) {
    return new TextDecoder().decode(
      Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
    );
  }

  return decodeURIComponent(payload);
}

بعد فك الترميز، تحقق من وجود جذر <svg> ومن أن الناتج يمكن تحليله كـ XML.

أفضل الممارسات

1. تحقق من XML المستعاد.
2. أزل scripts وevent handlers والمراجع الخارجية وforeignObject.
3. راجع viewBox والحجم والقص.
4. افتح النتيجة في SVG Viewer.
5. أعد التصدير من SVG to Data URI عند الحاجة.

أخطاء شائعة

• فك ترميز السلسلة كاملة بدلا من payload فقط.
• استخدام Base64 مع SVG مشفر بطريقة URL.
• إعادة استخدام SVG غير موثوق بدون تنظيف.
• نسيان أن CSS وHTML وJSON تحتاج إلى escaping مختلف.

سير عمل SVGView

فك ترميز Data URI، ثم الصق SVG في SVG Viewer، ونظفه عبر SVG Sanitizer، وحسنه باستخدام SVG Optimizer، ثم أنشئ سلسلة جديدة عبر SVG to Data URI.