Browse: Home / SVG

SVG

Macleod & Co.

Macleod & Co.

By on January 21, 2015

http://www.macleodandco.com/

Macleod designed, Darin developed.

  • WordPress
  • FoundationPress – WP Starter Theme
  • Used Bower, Grunt, and Sass
  • Responsive

Features

  • Home Page
    • Video or Image Background
      • Advanced Custom Fields (ACF) – Ability to choose between image or video background, different fields shown based on that option
    • Tagline – uses ACF
    • Featured Links – uses ACF
      • Ability to add up to 3 links with Name, Link and Color
  • Case Studies – Custom Post Type
    • Pods Plugin – to make custom post type
    • FitText jQuery Plugin – for scaling text size within Case Study link
    • Sweet hover effects
  • Portfolio Gallery – on Our Work page
    • ACF – to create the gallery
      • Ability to add new images with Title, Category, Tag(s) and Description.
    • FitText jQuery Plugin – for scaling text size within thumbnail link
    • MixItUp jQuery Plugin – for filtering projects based on tag
    • Magnific Popup jQuery Plugin – lightbox for large project image and description
    • Sweet hover effects
  • Main Site Navigation
    • Custom JS to toggle the menu open/closed and keep the bubble in the correct position
    • On Desktop, nav opens with hover and logo goes to homepage. On Mobile, opens with click and logo (or off-menu click) closes it.
    • Bubble size adjusts to the number of links in the nav

Posted in , | Tagged , , , , , , , , , , | Leave a response

SVG Best Practices; Optimization

By on March 6, 2013

The best way to use SVG today, mostly taken from here: http://css-tricks.com/using-svg/

As an image

<img src="kiwi.svg" alt="Kiwi standing on oval">

Add Modernizr trick for browser support

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

As a background image

<a href="/" class="logo">
  Kiwi Corp
</a>

 

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Fallback for background image

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

Best way is to use SVG code inline and optimized

SVG Optimizer
Base64 Converter

This video runs through it all

Posted in , , , | Tagged | Leave a response