گرافیک برداری مقیاس پذیر: مبانی طراحی

در این مقاله ، شما مفاهیم اساسی ، ساختار سند و عناصر طراحی مورد استفاده در تصاویر SVG را کشف خواهید کرد.

اگر کاملاً با SVG آشنا هستید ، ممکن است در ابتدا خواندن مقالات زیر کمک کند:

شبکه مختص SVG

SVG در هر فضای مختصاتی که به آن اختصاص دهید تعریف می شود. این فضا لزوماً با پیکسل ، سانتی متر ، اینچ یا سایر واحدهای مطلق ارتباط ندارد ، زیرا یک SVG می تواند در هر ابعادی مقیاس بندی شود.

SVG viewBox ویژگی مختصات تصویر را تعیین می کند. SVG های زیر وقتی در یک اندازه کوچک شوند یکسان به نظر می رسند:

• آ viewBox از 0,0 به 200,100 با یک خط از 0,0 به 100,50
• آ viewBox از 0,0 به 300,150 با یک خط از 0,0 به 150,75
• آ viewBox از 0,0 به 30,15 با یک خط از 0,0 به 15,7.5 (کسرهای یک واحد مجاز است)

برخلاف نمودارهای ریاضی ، سیستم مختصات SVG از بالا سمت چپ (معمولاً) شروع می شود 0,0) با محور x به سمت راست و محور y به سمت پایین اشاره دارد. بنابراین ، یک نکته در 100,200 100 واحد در سمت راست لبه دست چپ و 200 واحد پایین از لبه بالایی را نشان می دهد.

وقتی SVG ارائه می شود ، می توان آن را داد width و height ویژگی ها یا ابعاد اختصاص داده شده در CSS. تصویر در هر دو جهت کشیده یا له می شود تا فضای اختصاص داده شده را پر کند. با این حال ، یک SVG می تواند نسبت ابعاد آن را حفظ کند تا اطمینان حاصل شود که ابعاد به طور مداوم کوچک می شوند.

سند SVG XML

تصویر SVG یک سند XML است که از قراردادهای سختگیرانه (بسته شدن برچسب ها ، ویژگی های ذکر شده و غیره) پیروی می کند. هنگامی که SVG ها برای اولین بار در سال 1999 ساخته شدند ، پرونده ها به یک اعلامیه XML و DOCTYPE در بالای سند بالای ریشه نیاز داشتند. <svg> عنصر:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">

  

</svg>

هنوز هم ممکن است با این قالب روبرو شوید ، اما برای معمول تر است .svg پرونده ها برای استفاده از یک عنصر واحد:

<svg xmlns="https://www.w3.org/2000/svg">

  

</svg>

xmlns ویژگی لازم است بیشتر مرورگرها اجازه می دهند که وقتی SVG مستقیماً در HTML جاسازی شده است ، این مورد حذف شود ، اگر اگر بخواهید بعداً تصویر را دستکاری کنید ، این مسئله می تواند منجر به بروز مشکل شود:

<svg>

  

</svg>

زیاد ویژگی های اختیاری را می توان بر روی عنصر ریشه اعمال کرد، اما بیشترین موارد استفاده شده عبارتند از:

• viewBox برای تنظیم ابعاد.

  یک منطقه مختصات مستطیل شکل به عنوان مشخص شده است "minX minY width height". مثلا، viewBox="0 0 600 400" هست یک 600 توسط 400 جعبه عرض با مختصات بالا سمت چپ در 0,0. به یاد داشته باشید این یک فضای انتزاعی است. این مربوط به پیکسل ها نیست و عناصر طراحی شما در این مختصات محدود نیستند.

• نسبتAspectRatio نحوه مقیاس بندی یک Viewbox را تعریف می کند.

  گزینه های زیادی وجود دارد. مثلا، preserveAspectRatio="xMidYMid meet" تضمین می کند که وسط جعبه نمایش SVG با وسط دهانه نما (پنجره مرورگر یا عنصر HTML حاوی SVG) همسو باشد و تصویر با حفظ نسبت ابعاد متناسب با فضای موجود است.

• height و width اندازه تصویر ذاتی را تنظیم کنید.

  به عنوان مثال ، تنظیم width="300" height="200" از یک تصویر پیش فرض استفاده می کند 300 توسط 200 پیکسل مگر اینکه اندازه آن با استفاده از CSS اندازه گرفته شود. اگر عرض و ارتفاع بدون تنظیم a تنظیم شده باشد viewBox، تعداد واحدهای SVG به همان اندازه فرض می شود – یعنی viewBox="0 0 300 200".

ریشه <svg> عنصر را می توان با عنوان و شرح اختیاری تعریف شده با استفاده از تعریف کرد title و desc عناصر. یک سند اساسی:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>

  

</svg>

گروه بندی عناصر

هر مجموعه ای از عناصر (خطوط ، دایره ها ، مستطیل ها ، متن و …) را می توان با استفاده از گروه بندی کرد <g>...</g> برچسب ها در اصل ، این شبیه گروه بندی اشیا drawing طراحی شده در یک بسته گرافیکی است تا بتوان آنها را به عنوان یک مورد واحد دستکاری کرد.

به عنوان مثال ، شما می توانید یک گره گروه ریشه تعریف کنید تا کل تصویر از طریق JavaScript یا CSS قابل دستکاری باشد:

<g id="main">
  
</g>

یک گروه واحد در صورت لزوم می تواند هر تعداد گروه داخلی با لانه سازی داشته باشد.

خطوط

با استفاده از. یک خط واحد بین دو نقطه ترسیم می شود line عنصر:

<line x1="10" y1="10" x2="100" y2="200"
stroke="#999" stroke-width="5" stroke-linecap="round" />

stroke-linecap ویژگی اثر خط پایان را تعریف می کند و مقادیر را قبول می کند butt (پیشفرض)، round، square یا inherit:

منبع تصویر: w3.org

خطوط شهری

خطوط شهری مجموعه ای از بخشهای مستقیم متصل را تعریف کنید:

<polyline points="580,10 560,390 540,200 520,390 400,390"
stroke="#c00" stroke-width="5" stroke-linecap="round"
stroke-linejoin="round" fill="none" />

stroke-linejoin ویژگی اثر پیوستن خط را تعریف می کند و مقادیر را می پذیرد miter (پیشفرض)، round، bevel یا inherit:

منبع تصویر: w3.org

چند ضلعی ها

چند ضلعی ها شبیه polylines هستند با این تفاوت که شکل حاصل همیشه بسته خواهد شد:

<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"
stroke="#ff0" stroke-width="10" fill="#ff6" />

مستطیل ها

مستطیل های مربع یا گرد با استفاده از rect عنصر:

<rect x="100" y="10" width="150" height="100" rx="10" ry="20"
stroke="#060" stroke-width="8" fill="#0f0" />

x و y ویژگی ها گوشه بالا سمت چپ را تعریف می کنند. rx و ry گرد کردن افقی و عمودی گوشه را مشخص کنید.

حلقه ها

حلقه ها با استفاده از یک نقطه مرکزی و شعاع تعریف می شوند:

<circle cx="100" cy="300" r="80"
stroke="#909" stroke-width="10" fill="#f6f" />

بیضی ها

بیضی ها با استفاده از یک نقطه مرکزی و دو مقدار شعاع تعریف می شوند:

<ellipse cx="450" cy="50" rx="80" ry="30"
stroke="#0cc" stroke-width="10" fill="#0ff" />

پیامک

متن اصلی را می توان با استفاده از text عنصر:

<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>

x و y ویژگی ها مختصات پایین سمت چپ اولین کاراکتر در رشته را تعریف می کنند ، اگرچه text-anchor و dominant-baseline ویژگی ها کنترل بیشتری بر محل قرارگیری دارند.

راه ها

سرانجام ، یک وجود دارد path عنصر که قدرت تقلید از هر یک از عناصر اساسی فوق را دارد. برای جزئیات بیشتر به “نحوه ایجاد مسیرهای پیچیده در SVG” مراجعه کنید.

نتیجه

سند نهایی SVG ما شامل عناصر زیر است:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>
  <g id="main">
    <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />

    <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />

    <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />

    <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />

    <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />

    <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />

    <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
  </g>
</svg>

کد بالا به صورت زیر ارائه می شود:

تو می توانی فایل SVG را از اینجا بارگیری کنید.

این یک مثال ساده است ، اما پرونده کمتر از یک کیلوبایت است قبل از بهینه سازی ، کوچک سازی و gzipping. یک PNG فشرده معادل بالا تقریباً پنج برابر بزرگتر است و نمی توان آن را بالاتر از بومی خود مقیاس بندی کرد 407 توسط 274 وضوح بدون از دست دادن کیفیت.

به ندرت لازم است که SVG ها را به صورت دستی ترسیم کنید ، زیرا استفاده از بسته گرافیکی مانند آن آسان تر است تصویرگر، جوهر افشان، ویرایش SVG، یا رسم روش. با این حال ، درک نحوه کار عناصر اساسی SVG ممکن است به شما در بهینه سازی تصاویر یا ایجاد تصاویر شگفت انگیز در سرور یا JavaScript کمک کند.

منابع بیشتر: