What Svgs Are
Scalable vector graphics sre images made using XML (Extensable Markup Language) and are usually used to create custom icons. The SVG format allows easy creation of an image that can be displayed within a variety of platforms at any resolution without becoming distorted. This is particularly useful on mobile platforms as the use of SVG icons is more common on these screens, they also accommodate this with higher resolution screens preventing the chance of pixilation.
Advantages of using svgs on your site
There are multiple examples of the advantages of scalable vector graphics when used on the web in the form of icons or display images.
Smaller file size
SVG file sizes are usually lower than jpeg and png images as they are created using a series of shapes with attributes to manipulate these images to convert them into the finished product. Other images such as jpeg images are made up of a set amount of pixels which causes the file size to increase depending on factors including clarity, image size and resolution quality.
Resolution
Can be used on a range of platforms including mobile,tablet and desktop without distortion. This allows the designer to create an image without the doubt that it might become distorted when added to a finish web page.
Embedded
SVG’s can be embedded directly into html, this allows the image to be styled in the usual way through CSS. Object properties including background colour, opacity and borders can be applied and altered easily.
Animation
Can be edited and animated- SVG’s can be easily edited using a variety of programs including adobe illustrator and inkscape, additionally a range of online svg editors are available at no cost. Other technologies including javascript can be implemented alongside svgs in order to animate them, this can also be done using css.
Creative Freedom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Disadvantages of using svgs
There are little disadvantages when it comes to the production of SVG’s, only two common issues were apparent.
Clarity
SVG’s can be complex but won’t have the same clarity as an actual photographed image.
Older Browsers
SVG’s may not be supported within older browsers (This is a common issue with older browsers concerning the display of new technologies)
Why i decided to study svgs
As I intend to become involved in the user experience design sector of the web technologies, I had previously carried out research in order to gather ideas on what aspects my portfolio should adopt to become successful. One of the more interesting features I discovered while doing this was the implementation of images in place of navigational text elements.
Icon research/ Popular icons for portoflios
Home
usually a home icon, most audiences recognise this symbol as being home.
About
similarly a headshot of a person, recognised as this.
Blog
no conventional design, chose to take a well-known symbol ( pen and paper)
Contact
many icons can be used for contact depending what platform the icon is displayed on, phone, email symbol, person symbol, envelope.
Methods of svg production
HTML & CSS Styling
SVGs can be coded within HTML using a series of tags which convert into various shapes within the browser.
Simple shape elements- lines, circle, eclipse,polygons and poly-line. These elements are considered simple as they are easily manipulated and incorporated into svg designs.
hese shapes are controllable by using a set of attributes to control the features and dimensions of the shape. position (x,y,cy,cx) and dimensions (width/height).
using these shapes and their attributes, SVG’s can be produced in HTML alone.
SVG Editor
Designing SVG’s within an editor – SVG’s can also be produced within a range of editors including illustrator and inkscape.
A wide range of online editors is also available. By using the same principles including the use of simple shapes and their attributes.
Designs can be produced and exported through HTML or saved directly as an XML file.
My examples
By using an SVG editor (Method Draw) I created two sets of SVG icons to use in place of my text navigation.
Within the first set of designs I decided to incorporate the three colour method within the icons using black,white and red as a highlighting colour.
In the second set I decided to use only red and white. I did this as multiple elements within my site including my links feature this red as a highlighting tool, this will help aid familiarity when navigating the site and allow icons and links to be easily identified.