‏SVG و PDF هم می‌تونن تعاملی باشن

این مقاله — یادداشت‌هایی از سفرِ نویسنده در دلِ فرمت‌های فایل — به یه نکتهٔ کمترشناخته می‌پردازه: هم SVG و هم PDF یه لایهٔ تعاملیِ پنهان تو استانداردشون دارن که خیلی کم ازش استفاده می‌شه. به گفتهٔ نویسنده، SVG حتی می‌تونه اپ‌های کوچیکِ کاملاً مستقل رو در خودش جا بده. شاید SVGِ تعاملی رو دیده باشی (مثلاً ابزارِ Flamegraph)، ولی به‌ندرت به یه PDFِ واقعاً تعاملی برخوردی.

در پایه، هر دو فرمت ظرفی برای گرافیکِ برداری‌ان؛ SVG با XML توصیف می‌کنه و PDF با یه زبانِ دستوریِ برگرفته از PostScript. یه جایی هر دو استاندارد به این فکر افتادن که چطور کمی محتوای پویا — مثلِ یه تولتیپ موقعِ هاور — اضافه کنن، و همین «کمی» به سیستمی از انیمیشن، تایمر، رویداد و hit-testing گسترش پیدا کرد که به هر فرمت وصل شد.

موتورِ محرکِ SVGهای تعاملی، جاوااسکریپتِ جاسازی‌شده تو خودِ فایله که به رانتایمِ JSِ نمایشگر تکیه می‌کنه. معمولاً به المان‌ها id می‌دی و از داخلِ اسکریپت با همون id بهشون دسترسی می‌گیری. نمونهٔ زیر با گرفتنِ رویدادهای pointer، یه دایره رو درگ می‌کنه:

let dragging = false;
circle.addEventListener('pointerdown', () => dragging = true);
circle.addEventListener('pointerup', () => dragging = false);

circle.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  const { x, y } = screenToWorld(e);
  group.setAttribute('transform', `translate(${x},${y})`);
});

به گفتهٔ نویسنده این الگو — یه DOM که با اسکریپتِ کنارش می‌شه کاوش و دستکاریش کرد — خیلی توانمنده (چیزی که شاید اسمشو شنیده باشی: «اینترنت»). خیلی از کتابخانه‌های نمودار از همین SVGِ تعاملی به‌عنوان خروجیِ پایدارشون استفاده می‌کنن. یه مزیتِ کم‌استفادهٔ دیگه هم اینه که وقتی SVG داخلِ یه صفحهٔ وب جاسازی می‌شه، می‌شه از بیرون هم دستکاریش کرد و با همون CSSِ بقیهٔ سایت استایلش داد.

بخشِ غافلگیرکننده PDFه: به گفتهٔ نویسنده، PDF هم با جاوااسکریپت و یه APIِ اختصاصیِ Adobe می‌تونه بخشی از این کارها رو بکنه، ولی چون این API عمدتاً برای مدیریتِ فرم ساخته شده، مفهومِ عمومیِ ردیابیِ ماوس رو نداره؛ هیچ راهی نیست بپرسی «الان اشاره‌گر کجاست؟». برای همین درگ کردن رو با یه ترفند می‌سازن: کلِ ناحیه رو با سلول‌های نامرئیِ شبکه‌ای پُر می‌کنن و هر سلول موقعی که ماوس واردش می‌شه، شکل رو به خودش می‌کشونه. تعامل هم بیشتر با Adobe Reader درست کار می‌کنه و تو نمایشگرهای دیگه ممکنه نصفه‌نیمه باشه.

پس چرا این چیزها رو کم می‌بینیم؟ به گفتهٔ نویسنده، پیاده‌سازیِ کاملِ این قابلیت‌ها برای نمایشگرها سنگینه (تقریباً باید نصفِ یه مرورگر رو بسازی) و PDFِ اسکریپت‌دار هم سابقهٔ مشکلاتِ امنیتی داره. مشکلِ بزرگ‌ترْ ابزارِ ساخته؛ هرچند حالا می‌شه از یه چت‌باتِ هوش مصنوعی خواست چنین فایلی بسازه (نویسنده نمونه‌هاشو همین‌طوری ساخته)، ولی برای اسنادِ ماندگار و قابل‌آرشیو، هنوز راهی جز پرمالینک‌های اینترنتی به نظر نمی‌رسه.

نکات کلیدی:

• هم SVG و هم PDF یه لایهٔ تعاملیِ کم‌استفاده تو استانداردشون دارن
• تعاملِ SVG با جاوااسکریپتِ جاسازی‌شده کار می‌کنه و خیلی توانمنده
• PDF مفهومِ ردیابیِ ماوس نداره، برای همین درگ رو با سلول‌های نامرئیِ شبکه‌ای شبیه‌سازی می‌کنن
• تعاملِ PDF بیشتر به Adobe Reader وابسته‌ست و سابقهٔ مشکلاتِ امنیتی داره
• به گفتهٔ نویسنده، سدِ اصلی نه فرمت‌ها، که نبودِ ابزارِ خوب برای ساختِ این اسناده