SVG یک فرمت گرافیکی برداری است که خیلی وقت‌ها بدون اینکه متوجه باشیم در طراحی سایت با آن سروکار داریم. آیکن‌ها نمودارها و حتی بعضی انیمیشن‌ها با SVG ساخته می‌شوند. دلیل محبوبیتش هم واضح است چون در هر اندازه‌ای کیفیتش حفظ می‌شود. حالا اگر بخواهیم یک ابزار ساده بسازیم که کد SVG را بگیرد و همان لحظه خروجی‌اش را نشان بدهد به یک نمایشگر SVG نیاز داریم. در این مطلب دقیقا سراغ ساخت همین ابزار می‌رویم و مرحله به مرحله جلو می‌آییم.
نمایشگر SVG دقیقا چه کاری انجام می دهد؟
ایده نمایشگر SVG پیچیده نیست. کاربر یک کد SVG دارد. آن کد را داخل یک ویرایشگر قرار می‌دهد. سیستم بررسی می‌کند که کد درست نوشته شده یا نه. اگر مشکلی نبود نتیجه همان لحظه نمایش داده می‌شود. در آخر هم امکان دانلود فایل SVG وجود دارد. همین چند قابلیت ساده پایه خیلی از ابزارهای آنلاین طراحی هستند.
شروع کار با ساختار HTML
اول از همه باید اسکلت صفحه را بسازیم. ما به یک بخش برای وارد کردن کد نیاز داریم. یک بخش هم برای دیدن خروجی. در کنارش یک دکمه هم می‌گذاریم برای خروجی گرفتن.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>SVG Viewer Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>نمایشگر SVG</h1>
<p>کد SVG را وارد کنید و نتیجه را ببینید</p>
</header>
<div class="container">
<div class="editor">
<div class="editor-header">کد SVG</div>
<textarea id="svgInput"></textarea>
</div>
<div class="preview">
<div class="preview-header">نمایش خروجی</div>
<div id="previewContainer"></div>
</div>
</div>
<button id="exportBtn">دانلود SVG</button>
<script src="script.js"></script>
</body>
</html>
در این مرحله هنوز اتفاق خاصی نمی‌افتد اما پایه کار آماده شده است . textarea محل ورود کد است و previewContainer جایی است که بعدا SVG داخلش نمایش داده می‌شود .
مرتب کردن ظاهر با CSS
اگر ظاهر صفحه شلوغ یا نامرتب باشد کار با ابزار سخت می‌شود. برای همین بهتر است از همان ابتدا کمی به استایل توجه کنیم.
body {
font-family: Arial sans-serif;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
width: 100%;
max-width: 900px;
gap: 20px;
}
.editor .preview {
flex: 1;
border: 1px solid #999;
padding: 10px;
}
textarea {
width: 100%;
height: 300px;
font-family: monospace;
}
#previewContainer {
height: 300px;
border: 1px dashed #666;
}
با همین مقدار CSS صفحه کاملا قابل استفاده می‌شود و کاربر به‌راحتی می‌تواند بین ویرایشگر و خروجی جابه‌جا شود .
جان دادن به ابزار با JavaScript
حالا می‌رسیم به بخش اصلی یعنی جایی که کد SVG پردازش می‌شود .
بررسی و نمایش SVG
const svgInput = document.getElementById("svgInput");
const previewContainer = document.getElementById("previewContainer");
const exportBtn = document.getElementById("exportBtn");
function loadSVG(code) {
previewContainer.innerHTML = "";
if (!code.trim()) {
previewContainer.textContent = "هیچ کدی وارد نشده";
return;
}
try {
const parser = new DOMParser();
const doc = parser.parseFromString(code "image/svg+xml");
if (doc.querySelector("parsererror")) {
throw new Error("کد SVG معتبر نیست");
}
const svg = doc.querySelector("svg");
if (!svg) {
throw new Error("المان svg پیدا نشد");
}
previewContainer.appendChild(svg.cloneNode(true));
} catch (err) {
previewContainer.textContent = err.message;
}
}
اینجا اول بررسی می‌شود که ورودی خالی نباشد. بعد کد SVG پارس می‌شود. اگر مرورگر خطایی تشخیص بدهد پیام مناسب نمایش داده می‌شود. در غیر این صورت SVG بدون دردسر نمایش داده می‌شود.
آپدیت زنده خروجی
svgInput.addEventListener("input" () => {
loadSVG(svgInput.value);
});
به این شکل هر تغییری که کاربر ایجاد می‌کند همان لحظه در خروجی دیده می‌شود. این بخش حس زنده بودن ابزار را ایجاد می‌کند.
دانلود فایل SVG
function exportSVG() {
const blob = new Blob([svgInput.value] { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "svg-file.svg";
link.click();
URL.revokeObjectURL(url);
}
exportBtn.addEventListener("click" exportSVG);
این قسمت فایل SVG نهایی را می‌سازد و به کاربر اجازه می‌دهد آن را ذخیره کند.
نمایش یک نمونه SVG در شروع کار
برای اینکه کاربر از همان ابتدا بداند ابزار چطور کار می‌کند بهتر است یک نمونه SVG پیش‌فرض قرار دهیم.
window.addEventListener("load" () => {
const sample = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="green"/></svg>`;
svgInput.value = sample;
loadSVG(sample);
});
نتیجه گیری
ساخت نمایشگر SVG بیشتر از آنکه سخت باشد نیاز به درک درست دارد. وقتی بدانید SVG چطور پارس می‌شود و چطور در DOM قرار می‌گیرد بقیه مسیر ساده است. این ابزار می‌تواند پایه ساخت ویرایشگرهای حرفه‌ای‌تر باشد. اگر در حوزه فرانت‌اند کار می‌کنید چنین تمرینی کمک می‌کند نگاه عمیق‌تری به SVG و تعامل آن با JavaScript داشته باشید.
