storm-trooperz

Using SVGs for Web Development

This entry was posted in Web Design and tagged , , on by .   

SVGs or (Scalable Vector Graphics) are handy if you’re concerned with page load times or if you have repetitive graphics on your web site. Keep in mind this works better with single colors rather than multiple as the more complicated the SVG gets the more processor intensive it is to load.

If you have a graphic you use time and time again, but would like it in a different color this is your fix. SVGs by nature are scalable so you can make them as big or as small as you want. That being said I’ll demonstrate how to generate your own svgs in the steps below.

How to Make Your Own SVGs

Illustrator for SVGs

In Illustrator open or create your AI file. In this example I downloaded Star Wars vector graphics. Join the dark side. The process is pretty simple, but you’ll want to choose the following options.

SVG Options

  • SVG Profile: SVG 1.0
  • Type: SVG
  • Options: Embed

When you go to save out your SVG you will want to click on the SVG Code button at the bottom of the Options palette. This will give you the path data code generated from AI.

How to Change the Color of your SVGs with CSS

Each shape generated from Adobe Illustrator will contain xml data, image path data as well as CSS that can be altered to be what ever color you want. This way you can change the color of repetitive graphics by simply updating a hex value. Since each individual path is exported it is also an option to change the path colors individually if you’re so inclined.

Remove Unnecessary Whitespace from your SVGs

Adobe Illustrator has a nasty habit of adding not only a bunch of unnecessary data and whitespace to your SVGs breaking paths and in turn making the SVGs appear as a jumbled bunch of code. To remedy this issue I found this handy SVG Optimizer from Peter Collingridge. It removes all white space an more. Enjoy.

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Waze

The Social Network that Helps you Outsmart Police

This entry was posted in Social Media and tagged , , on by .   

If the Duke Boys had this app back in the day they never would have had to get the General Lee up on 2 wheels. I’m speaking of course of the social media app Waze.

If you drive and have a smart phone you should be using this app right now. Not only will it save you time, but it can also save you money by finding the cheapest gas nearest to you, the best […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
rabbids

5 Simple Tips for Rapidly Developing Mobile Web Sites

This entry was posted in Real Quick Web Design Tips and tagged , , , , , on by .   

When building web sites for all devices it’s important to keep a few things in mind. With a little forethought you can save yourself some headaches by implementing the steps listed below. By adapting some of these tips you’ll not only save yourself time developing sites, but you’ll be able to provide a much fresher web approach that can easily be duplicated freeing up your time for other endeavors.

Mobile First
More and more people […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
CSS3

CSS Gradients and Drop Shadows for Bootstrap

This entry was posted in Real Quick CSS Tips and tagged , , , , on by .   

Here are a couple quick code samples that you can add to your CSS for future use. The examples below generate gradients and drop shadows for your designs.

Drop Shadow
These drop shadows can be altered to reflect into what ever direction you need by altering the webkit and box shadow options in the CSS.

 
.dropshadow {
height: auto;
-webkit-box-shadow: -15px 13px 20px 3px rgba(0,0,0,0.91);
-moz-box-shadow: -15px 13px 20px 3px rgba(0,0,0,0.91);
box-shadow: -15px 13px 20px 3px rgba(0,0,0,0.91);
}

Inner […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Google Webmaster Tools

5 Tips for Using Google Webmaster Tools to Improve your Web Site

This entry was posted in Google Advice and tagged , , , , , on by .   

Knowing more about your web site will in turn make it better. Often times we as designers get too close to a project that we’re working on that we over look some glaring issues that may be staring us directly in the face. By using Google Webmaster Tools you cannot only see where your web site traffic is being generated, but also see how often your site is being crawled and find problems in […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Tokyo, Socwall.com

5 Tips for Improving your Blog that Will Build Traffic

This entry was posted in Blogging Tips and tagged , , on by .   

(Image credit: Socwall.com)
Do you have a blog that you would like to improve your viewer ship and overall traffic? Chances are if you’re a serious blogger you’re always looking for a way to gain and retain new viewers. In this post I list several tips for not only creating sticky content but also:

Blogging Tips for Better Blog Traffic
Beginners Guide to Google Analytics
How […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS