گرافیک برداری روشی برای برقراری ارتباط مجموعه ای از اشکال، مختصات و مسیرها به بافت رندر آنهاست. آنها مجموعه ای از دستورالعمل ها برای نحوه ترسیم یک تصویر هستند. هنگامی که آن تصویر بزرگ یا کوچک می شود، مجموعه ای از نقاط و خطوطی که تصویر نشان می دهد، دوباره ترسیم می شوند تا مقیاس شوند. یک منحنی صاف بین دو نقطه به همان آرامی در هر اندازهای دوباره ترسیم میشود - شبیه به روشی که یک حاشیه تعریفشده توسط CSS روی یک عنصر HTML دوباره ترسیم میشود، همانطور که آن عنصر در viewport مقیاسبندی میشود.
Scalable Vector Graphics (SVG) یک زبان نشانه گذاری مبتنی بر XML است که توسط W3C توسعه یافته است. این یک فرمت تصویر برداری است که برای وب مدرن طراحی شده است.
هر نرم افزار طراحی اختصاص داده شده به ویرایش آثار هنری برداری به شما امکان می دهد یک تصویر را به صورت SVG صادر کنید. اما SVG به عنوان یک زبان نشانهگذاری استاندارد و قابل خواندن توسط انسان، میتواند با هر نرمافزار ویرایش متنی، بدون توجه به نرمافزاری که برای ایجاد آن استفاده میشود، ایجاد و ویرایش کند، هرچند که به سرعت برای تصاویری با هر پیچیدگی واقعی غیرواقعی میشود. SVG را می توان با CSS استایل بندی کرد یا حاوی جاوا اسکریپت باشد که رفتارها و تعاملات را در خود تصاویر ایجاد می کند.
حتی فراتر از جذابیت آشکار برای طراحان و توسعه دهندگان، SVG نیز یک فرمت فوق العاده قدرتمند از نظر تجربه کاربر نهایی است. اطلاعات توصیفی موجود در یک منبع SVG اغلب در مقایسه با اطلاعات دستوری تر مبتنی بر شبکه پیکسلی فرمت های تصویر شطرنجی بسیار فشرده است، در مورد اشکال ساده - برای ساده سازی بیش از حد، تفاوت بین گفتن به مرورگر "یک خط قرمز 1px بکشید". بین 1x1 و 1x5" و "1x1 یک پیکسل قرمز است. 1x2 یک پیکسل قرمز است. 1x3 یک پیکسل قرمز است. 1x4 یک پیکسل قرمز است. 1x5 یک پیکسل قرمز است." طرف دیگر این است که ماهیت توصیفی SVG نیاز به تفسیر بیشتر - "تفکر" بیشتر - از مرورگر دارد. به همین دلیل، SVG های پیچیده می توانند رندر شوند. در همین راستا، یک تصویر بسیار پیچیده میتواند به معنای مجموعهای از دستورالعملها و اندازه بزرگ انتقال باشد.
ممکن است کمی آزمون و خطا طول بکشد تا بتوانید فوراً یک نامزد منبع تصویر را که به جای فرمت رستر معمولی، بهتر از SVG ارائه می شود، تشخیص دهید. با این حال، چند دستورالعمل وجود دارد: عناصر رابط مانند نمادها تقریباً همیشه به خوبی توسط SVG ارائه می شوند. آثار هنری با خطوط تیز، رنگهای ثابت و شکلهای کاملاً مشخص احتمالاً کاندیدای قوی برای SVG خواهند بود.
SVG یک موضوع بزرگ است: یک زبان نشانه گذاری کامل که در کنار HTML ساخته شده است، با گزینه ها و قابلیت های سبک منحصر به فرد. برای آشنایی بیشتر با SVG به آموزش MDN SVG مراجعه کنید.