svg

I Know I should use SVGs, But I Don’t Know How

Posted on Updated on

At 9:15am on 4/28/2018, I attended I Know I should use SVGs, But I Don’t Know How, Presented by Colin Lord of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building II of North Carolina State University in Raleigh, NC.

I Know I should use SVGs, But I Don’t Know How

Using SVG images are a lot like going to the gym. We all know we *should* be using them when we write our front end code, but we end up putting it off for another project down the road. And when SVGs are used, they are often implemented in a way that doesn’t unlock their full potential.

During this presentation, I hope we’ll discuss the best practices for SVG implementation and how they vary depending on the size and audience of your site. Perhaps we will also go through what an SVG sprite is, how to create one, and why they’re awesome. According to Advanced Web Ranking.com, only 3% of sites on the internet use this technique…but 97% of browsers support it!

After this talk, I hope to be ready to work on SVGs effectively.

Everything we’re talking about will work on wordpress 4 & 5

The slides will be available. The Coke bottle is an SVG, and it means there are notes in the slides

These Image types have been available over the last 10 years.

 

SVG Compliment the other image types. You won’t stop using the others. there are 3 types we use, but there’s room for a 4th.

SVG files are smaller than jpg, png, gif

The logo for this company is either 0.5kb or 12kb depending on file type. That’s a dramatic savings on file type. Also,they are HDPI ready. They don’t have to be saved as a 2x, 3x, and you are future saving as well.

At a larger size, there is no difference in quality, but this is not true with bitmap graphics. Vector graphics do not increase in file size and no loss in quality. This is opposite with raster graphics.

 

What’s the browser support like?

the only red column is IE8. Unless you are worried about old IE versions, it works across the board, and works with CSS grid. They are easy and efficient to animate, giving more framerate and can manipulate it with CSS and javaScript. One SVG with javascript inside. Rather than exporting 365 graphics, a single SVG can be used for a whole calendar.

Chris Coyier Practical SVG is a fine book. This book is about creation, export, advocation on SVG at the 4th graphic type.

 

How do we use them correctly and efficiently?

there are ways to use this correctly and incorrectly. Photoshop can export anything as an SVG. Bitmaps (raster) is not a good SVG image. Once exported how can you use them:

You can treat it like any other image, and it will be treated the same way. Its pretty simple to put them into a webpage. The logo has size advantage and will be used well on any

Image is not loaded into the DOM. It just sees the size as a square. SVG at its core is just code, so you can load it into the dom

This gibberish all came out of illustrator. SVG vectors are really just a lot of math. How do we get on this? This is horribly against several brand guidelines. You can use any CSS, color change, states, etc. You can open the SVG in any text editor, and then post this item into the HTML

It is clear why to use that: there is so much to take advantage of.

rather than consider how much it is to deal with those items, this would be ridonkulous. To fix that, we use the SVG Sprite.

These are less important and people have pushed them out of style. It was tedious and not fun. You create and image window and long background image. It slides around as needed.

Here’s a basic example:

children inside the SVG sprite are symbols, and we give a name or ID inside for each. we use the name SVG- at the front so that we are not confused with it as a CSS Class. The viewbox here is the spacing. The title tag may or may not come with titles out of illustrator. The main takeaway is that the title may be something you wish to add yourself.

An SVG sprite is something we’re not displaying, but we’re putting symbols in in the code.

CLient logo, search and star are being used here. top images are at bottom of <header.php> file. Stars are only on the profile pages.

Social media icons can use a single sprite. You only need to link to it a single time.

this is all relegated to a file (erb?) which can be somewhere on the page

There are more ways, but these are 4 easy ones which we can use. There are more which can be used and they don’t always work well, such as SVG Injector

WIth this, we load the library. Anywhere we use Inject-Me class, the Image.svg is removed and the new items are added in the place at a browser and server level. The problem, it loads the image twice. First it loads the page, loads the javascript, loads the images again. That means we see the images show up, remove, show up again.

If the client saw it, that’s bad. Also not a good performance trick. Of the 4 examples we’ve discussed, there hasn’t been a time when the materials didn’t work properly.

Use FontAwesome. Load it into your site. Use them in your site. The iconset is fantastic.

Look at the material here. The HTML method (97% of use) has the most red X in them. Before you go down that road, its how many people use it, but its very, very limited.

 

The takeaway here: There’s a place for a 4th file type here.

Slides at bit.ly/wcraleigh-svg

 

 

The Logitech Spotlight (works with bluetooth and also dongle) was used in this presentation, and it was fantastic!

Exporting from illustrator?

Use the web-optimized version so that you keep things clean and clear

Colin Lord

Colin Lord is a Senior Front End Developer for Modea in Blacksburg, Virginia. He has spent the last three years working in the healthcare industry for the Vanderbilt University Medical System, the Duke University Health System, and Carilion Clinic. Before that, he spent time in the music industry building sites for artists like Brad Paisley, Garth Brooks, Imagine Dragons, and The Band Perry. Other clients that have crossed his path are Verizon Wireless, ADT Home Security and DirecTV.

Advertisements

Microsoft Technology Associate (MTA) status in Introduction to Programming Using HTML and CSS Achieved!

Posted on Updated on

At 10:45am On 3/22/18 I attended the Certiport certification lab presented by Certiport at the 2018 NCCIA Conference located at Asheville-Buncomb Technical Community College in Asheville, NC.

MTA-Introduction-to-Programming-using-HTML-and-CSS-2018Tyler Dockery Achieves MTA status in Introduction to Programming Using HTML and CSS

MTA status in Introduction to Programming Using HTML and CSS Achieved!

I chose to attempt this exam because I felt I could validate the skills and knowledge to recognize and write syntactically correct HTML and CSS, structure data using HTML elements, and create and apply styles using CSS. Since I was trained on HTML in 1996 and certified with CSS in 2001, and had been working with HTML and CSS with clients for 18 years at this point, I’m familiar with their features and capabilities, and understand how to write, debug, and maintain well-formed HTML and CSS code.

The Official Breakdown of Subject Matter

Microsoft’s official exam page for this test: MTA EXAM 98-338 outlines the following fundamentals will possibly be covered:

 

Understand HTML Fundamentals (10-15%)
  • Construct markup that uses metadata elements
    • Script; noscript; style; link; meta tags, including encoding, keywords, viewport, and translate
  • Construct well-formed markup that conforms to industry best practices
    • DOCTYPE declaration; HTML; head; body; proper syntax, including closing tags and commonly used symbols; comments
Understand CSS Fundamentals (15-20%)
  • Analyze the impact of using inline styles, internal style sheets, and external style sheets
    • When to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets
  • Construct and analyze rule sets
    • Valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class
  • Construct well-formed style sheets that conform to industry best practices
    • Reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts
Structure Documents Using HTML (30-35%)
  • Construct and analyze markup to structure content and organize data
    • Table tags; h1-h6; p; br; hr; div; span; ul; ol; li
  • Construct and analyze markup that uses HTML5 semantic elements
    • Semantic tags; header; nav; section; article; aside; footer; details; summary; figure; caption
  • Construct and analyze markup that implements navigation
    • Image links; a; target; bookmark; relative versus absolute links; navigating simple folder hierarchies
  • Construct and analyze markup that uses form elements
    • Form attributes; action; method; submission methods; accessibility; input types and restrictions; select; textarea; button; output; option; datalist; fieldset
 Present Multimedia Using HTML (10-15%)
  • Construct and analyze markup that displays images
    • img and picture elements and their attributes
  • Describe the appropriate use of the img, svg, and canvas elements
  • Construct and analyze markup that plays video and audio
    • Video; audio; track; source; simple iframe implementations
Style Web Pages Using CSS (20-25%)
  • Construct and analyze styles that position content
    • Positioning, including float, relative, absolute, max-width, overflow, height, width, and align; inline versus block; visibility; box model, including margins and padding
  • Construct and analyze styles that format text
    • Font-family; color; font-style; font-size; font-weight; link colors; text formatting, including text alignment, text decoration, and indentation
  • Construct and analyze styles that format backgrounds and borders
    • Border-color; border-style; border-width; backgrounds; divs; colors
  • Analyze styles that implement a simple responsive layout
    • Units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width

Conclusion

All in all, this test was well worth the time and effort. The materials covered had a good amount of in-depth knowledge requirement, and I was able to break through with a score in the mid 900s. It was a good challenge, and I felt it will be helpful to me to show students that the MTA exams are a fine choice to showcase their abilities.