Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

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

استفاده از SVG با CSS3 و HTML5 با اصول اولیه شروع می‌شود، توضیح می‌دهد که چگونه شکل‌ها و نمادهای ساده در SVG تعریف می‌شوند، و سپس بر اساس آن پایه‌گذاری می‌شود تا گرافیک‌های پیچیده و برنامه‌های متحرک تعاملی ایجاد کند. این همه ویژگی‌هایی را که احتمالاً در طراحی وب با آنها روبرو می‌شوید پوشش می‌دهد، در حالی که از مناطقی با پشتیبانی ضعیف مرورگر اجتناب می‌کند.

Unlike other image formats, SVG can be an interactive part of your web site, integrated in HTML5 markup or created dynamically using JavaScript. It can be styled by CSS to instantly adapt to changes in your site's design. Flexible metadata options can make the graphics accessible to screen readers and search engines. And it is always displayed at the highest resolution possible, without requiring larger file sizes, making it ideal for both widescreen desktop displays and Retina mobile devices.

Using SVG with CSS3 and HTML5 starts with the basics, explaining how simple shapes and icons are defined in SVG, and then builds upon that foundation to create complex graphics and interactive, animated applications. It covers all the features you're likely to come across in web design, while avoiding areas with poor browser support.