More about SVG

Web Designer - - Tutorials -

Poorly sup­ported and largely ig­nored for most of the 2000s, in 2017 all mod­ern web browsers can ren­der SVG – and most vec­tor draw­ing pro­grams ex­port it. SVG is the one graphic for­mat that most closely re­sponds to cur­rent web de­vel­op­ment de­mands of scal­a­bil­ity, re­spon­sive­ness, in­ter­ac­tiv­ity and per­for­mance.

SVG is an XML lan­guage and file for­mat, which al­lows you to code two-di­men­sional graph­ics that scale and can be ma­nip­u­lated via CSS or Javascript.

All SVG graph­ics are plot­ted on a co­or­di­nate sys­tem of at least an x and y axis. When au­thor­ing SVG, we give the browser in­struc­tions on where to plot points on the co­or­di­nate sys­tem and con­nect them. By con­nect­ing the plot­ted points we can cre­ate shapes, lines or paths.

The <svg> tag al­lows you to add in cus­tom classes, which then gives you more con­trol us­ing CSS or Javascript. Also within the tag you’re given a at­tribute called ‘view­box’. The value of the view­box is a list of four num­bers that rep­re­sent the ‘x’ and ‘y’ axis as well as the width and height, all in that order. <svg class=”your­class” view­box=”0 0 300 415”> <path d=”m20.5,20.5h260v375h260v20.5z” /></svg>

For more SVG info go to https://bit.ly/2ryl­gff

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.