SVG و XML

SVG چیست؟

SVG مخفف Scalable Vector Graphics است؛ زبانی XMLی برای توصیف گرافیک برداری دوبعدی. برخلاف تصاویر پیکسلی (PNG/JPG)، SVG با فرمول ریاضی رسم می‌شود و در هر اندازه‌ای شفاف و واضح می‌ماند.

اولین SVG شما

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="80" fill="blue"/>
</svg>

این کد یک دایره آبی رسم می‌کند. همان‌طور که می‌بینید SVG کاملاً XML است: پرولوگ، فضای نام، عناصر و ویژگی‌ها!

شکل‌های پایه SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">

    <!-- مستطیل -->
    <rect x="10" y="10" width="100" height="60"
          fill="red" stroke="black" stroke-width="2"/>

    <!-- دایره -->
    <circle cx="200" cy="50" r="40" fill="green"/>

    <!-- بیضی -->
    <ellipse cx="320" cy="50" rx="50" ry="25" fill="orange"/>

    <!-- خط -->
    <line x1="10" y1="100" x2="150" y2="150" stroke="blue" stroke-width="3"/>

    <!-- چندضلعی -->
    <polygon points="200,100 250,180 150,180" fill="purple"/>

    <!-- مسیر (قدرتمندترین!) -->
    <path d="M 300 100 L 350 150 L 300 200 Z" fill="teal"/>

    <!-- متن -->
    <text x="20" y="250" font-size="24" fill="black">سلام SVG!</text>

</svg>

ویژگی‌های مهم

گروه‌بندی و استفاده مجدد

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <defs>
        <!-- تعریف یک‌بار برای استفاده چندبار -->
        <g id="star">
            <polygon points="10,0 12,6 18,6 13,10 15,16 10,12 5,16 7,10 2,6 8,6" fill="gold"/>
        </g>
    </defs>

    <use href="#star" x="10" y="10"/>
    <use href="#star" x="60" y="10" transform="scale(1.5)"/>
    <use href="#star" x="150" y="10"/>
</svg>

چرا SVG در وب محبوب است؟

• بی‌نهایت مقیاس‌پذیر: در هر زوم و اندازه شارپ می‌ماند — عالی برای لوگو و آیکون
• حجم کم: برای آیکون‌ها معمولاً از PNG کوچک‌تر است
• قابل استایل با CSS: رنگ و اندازه با CSS قابل تغییر است
• قابل انیمیشن: با CSS یا SMIL متحرک می‌شود
• قابل ویرایش با جاوااسکریپت: چون DOM است!

SVG داخل HTML

<!-- مستقیم داخل HTML (اینلاین) -->
<button>
    <svg width="16" height="16" viewBox="0 0 16 16">
        <path d="M8 1l2 4 4 .5-3 3 1 4-4-2-4 2 1-4-3-3 4-.5z" fill="currentColor"/>
    </svg>
    افزودن به علاقه‌مندی‌ها
</button>

استایل SVG با CSS

.icon {
    width: 24px;
    height: 24px;
    fill: gray;
    transition: fill 0.3s;
}

.icon:hover {
    fill: red;   /* با hover رنگ عوض می‌شود! */
}