///// PATHS \\\\\ // FEATURES PIN \\ @path-pin-feat : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/defs/map-pin-wide-empty.svg); // ICONS \\ @path-beach : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/beach.svg); @path-benches : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/benches.svg); @path-bpark : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/bpark.svg); @path-commserv : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/commserv.svg); @path-conc : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/conc.svg); @path-event : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/event.svg); @path-historic : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/historic.svg); @path-mainpoints : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/mainpoints.svg); @path-other : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/other.svg); @path-parking : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/parking.svg); @path-ranger : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/ranger.svg); @path-restroom : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/restroom.svg); @path-signs : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/signs.svg); @path-trails : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/trails.svg); @path-vista : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/vista.svg); @path-water : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/water.svg); ///// COLORS \\\\\ // FEATURES MAP PINS \\ @c-perm-pin-fill: #7caad4; @c-feat-pin-fill: #934e7d; @c-feat-pin-stroke: darken(@c-feat-pin-fill, 25%); // WHITE ICON FILL \\ @c-icon-fill: #f9f9f9; // SELECTED FEATURE \\ @c-sel-feat-fill: red; @c-sel-feat-stroke: darken(@c-sel-feat-fill, 25%); ///// SIZES & POSITIONING \\\\\ /// Middle zooms (use as base) \\\ // MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\ @pin-h-mid: 34; @pin-line-w-mid: 28; @pin-shift-y-mid: @pin-h-mid/2*-1; // ICON HEIGHT \\ @icon-h-mid: 17; @icon-shift-y-mid: @icon-h-mid * -.25; /// Close zooms \\\ // MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\ @pin-h-close: 32; @pin-line-w-close: 24; @pin-shift-y-close: @pin-h-close/2*-1; // ICON HEIGHT \\ @icon-h-close: 15; @icon-shift-y-close: @icon-h-close * -.25; /* Not mainpoints */ #features{ bg/marker-allow-overlap: true; bg/marker-file: @path-pin-feat; bg/marker-fill : @c-feat-pin-fill; bg/marker-height: @pin-h-mid; bg/marker-line-color: @c-feat-pin-stroke; bg/marker-line-width: @pin-line-w-mid; bg/marker-opacity : .9; bg/marker-transform: translate(0,@pin-shift-y-mid); fg/marker-allow-overlap: true; fg/marker-fill: @c-icon-fill; fg/marker-height: @icon-h-mid; fg/marker-transform: translate(0,@pin-shift-y-mid*1.25); [type="mainpoints"]{ [zoom<14]{ bg/marker-fill: @c-perm-pin-fill; bg/marker-line-color: darken(@c-perm-pin-fill, 25%); fg/marker-file: @path-mainpoints; } [zoom>=14]{ bg/marker-height: 1; bg/marker-width: 1; fg/marker-height: 1; fg/marker-width: 1; } } [type="beach"] {fg/marker-file: @path-beach; fg/marker-height: @icon-h-mid*.5;} [type="benches"] {fg/marker-file: @path-benches; fg/marker-height: @icon-h-mid*.35;} [type="bpark"] {fg/marker-file: @path-bpark; } [type="commserv"] {fg/marker-file: @path-commserv;} [type="conc"] {fg/marker-file: @path-conc; fg/marker-height: 13; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);} [type="event"] {fg/marker-file: @path-event; fg/marker-height: 14; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);} [type="historic"] {fg/marker-file: @path-historic; fg/marker-height: 13; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);} [type="other"] {fg/marker-file: @path-other;} [type="parking"] {fg/marker-file: @path-parking; fg/marker-width: 13; fg/marker-transform: translate(1,@pin-shift-y-mid*1.2);} [type="ranger"] {fg/marker-file: @path-ranger; } [type="restroom"] {fg/marker-file: @path-restroom; fg/marker-height: 13; fg/marker-transform: translate(-1,@pin-shift-y-mid*1.3);} [type="signs"] {fg/marker-file: @path-signs;} [type="trails"] {fg/marker-file: @path-trails;} [type="vista"] {fg/marker-file: @path-vista; fg/marker-height: @icon-h-close*.9; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);} [type="water"] {fg/marker-file: @path-water;} }///// PATHS \\\\\ // FEATURES PIN \\ @path-pin-feat : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/defs/map-pin-wide-empty.svg); // ICONS \\ @path-bb : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/bb.svg); @path-cottage : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/cottage.svg); @path-financial : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/financial.svg); @path-food : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/food.svg); @path-gallery : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/gallery.svg); @path-grocery : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/grocery.svg); @path-hardware : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/hardware.svg); @path-health : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/health.svg); @path-motel : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/motel.svg); @path-organization : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/organization.svg); @path-professional : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/professional.svg); @path-realestate : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/realestate.svg); @path-recreation : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/recreation.svg); @path-rental : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/rental.svg); @path-shops : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/shops.svg); ///// SIZES & POSITIONING \\\\\ /// Middle zooms (use as base) \\\ // MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\ @pin-h-mid: 34; @pin-line-w-mid: 28; @pin-shift-y-mid: @pin-h-mid/2*-1; // ICON HEIGHT \\ @icon-h-mid: 17; @icon-shift-y-mid: @icon-h-mid * -.25; /// Close zooms \\\ // MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\ @pin-h-close: 32; @pin-line-w-close: 24; @pin-shift-y-close: @pin-h-close/2*-1; // ICON HEIGHT \\ @icon-h-close: 15; @icon-shift-y-close: @icon-h-close * -.25; ///// COLORS \\\\\ // MAP PINS \\ @c-feat-pin-fill: #f7892e; @c-feat-pin-stroke: darken(@c-feat-pin-fill, 25%); // WHITE ICON FILL \\ @c-icon-fill: #f9f9f9; // SELECTED FEATURE \\ @c-sel-feat-fill: red; @c-sel-feat-stroke: darken(@c-sel-feat-fill, 25%); #commercial{ bg/marker-allow-overlap: true; bg/marker-file: @path-pin-feat; bg/marker-fill: #f7892e; bg/marker-height: @pin-h-mid; bg/marker-line-color: darken(#f7892e,25%); bg/marker-line-width: @pin-line-w-mid; bg/marker-opacity : .9; bg/marker-transform: translate(0,@pin-shift-y-mid); fg/marker-allow-overlap: true; fg/marker-fill: @c-icon-fill; fg/marker-height: @icon-h-mid; fg/marker-transform: translate(0,@pin-shift-y-mid*1.25); [type="bb"] {fg/marker-file: @path-bb;} [type="cottage"] {fg/marker-file: @path-cottage; fg/marker-height: @icon-h-mid * .9;} [type="financial"] {fg/marker-file: @path-financial;} [type="food"] {fg/marker-file: @path-food;} [type="gallery"] {fg/marker-file: @path-gallery;} [type="grocery"] {fg/marker-file: @path-grocery; fg/marker-height: @icon-h-mid * .85; fg/marker-transform: translate(0,@pin-shift-y-mid - 3);} [type="hardware"] {fg/marker-file: @path-hardware; fg/marker-height: @icon-h-mid * .9;} [type="health"] {fg/marker-file: @path-health;} [type="motel"] {fg/marker-file: @path-motel; fg/marker-height: @icon-h-mid * .6;} [type="organization"] {fg/marker-file: @path-organization; fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);} [type="professional"] {fg/marker-file: @path-professional;} [type="realestate"] {fg/marker-file: @path-realestate; fg/marker-height: @icon-h-mid * .9;} [type="recreation"] {fg/marker-file: @path-recreation; fg/marker-height: @icon-h-mid * .9;} [type="rental"] {fg/marker-file: @path-rental; fg/marker-height: @icon-h-mid * .75;} [type="shops"] {fg/marker-file: @path-shops;} /* Second-to-closest zoom level group; set sizes only */ // [zoom>=15][zoom<17]{ // bg/marker-height: @pin-h-close; // bg/marker-transform: translate(0,@pin-shift-y-close); // [type="grocery"] {fg/marker-height: @icon-h-close * .85;} // [type="motel"] {fg/marker-height: @icon-h-close * .65;} // [type="organization"] {fg/marker-height: @icon-h-close * .7;} // [type="rental"] {fg/marker-height: @icon-h-close * .8; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);} // [type="recreation"] {fg/marker-height: @icon-h-close * .9;} // fg/marker-height: @icon-h-close; // fg/marker-transform: translate(0,@pin-shift-y-close*1.25); // } /* Closest zoom level group; set sizes only (same as mid?) */ // [zoom>=17]{ // bg/marker-height: @pin-h-mid; // bg/marker-transform: translate(0,@pin-shift-y-mid); // [type="grocery"] {fg/marker-height: @icon-h-mid * .85;} // [type="motel"] {fg/marker-height: @icon-h-mid * .65; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);} // [type="organization"] {fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);} // [type="recreation"] {fg/marker-height: @icon-h-mid * .9;} // [type="rental"] {fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);} // fg/marker-height: @icon-h-mid; // fg/marker-transform: translate(0,@pin-shift-y-mid*1.2); // } }/****** VARIABLES ******/ /* Sizes */ @trail-w-init: 6; /* Colors */ @c-shadow : #333; @c-dash-light : #eee; @c-dash-dark : #eee; /****** TRAIL ******/ #sbht{ ::waybottom { line-width: 30; line-opacity: .01; } ::bottom { line-width: 10; line-opacity: .15; line-color: #fff; line-join: round; } ::next { line-width: 9; line-opacity: .3; line-color: #fff; line-join: round; } ::mid { line-width: 8; opacity: .3; line-color: @c-shadow; line-join: round; line-smooth: .25; } ::tiptop { line-width: 4.75; line-color: @c-shadow; line-join: round; line-smooth: .25; line-cap: round; } ::dash { line-color: #eee; line-width: 3.5; line-smooth: .25; line-dasharray: 8; } } http://thenounproject.com The Noun Project Icon Template Reminders Strokes Try to keep strokes at 4px Minimum stroke weight is 2px For thicker strokes use even numbers: 6px, 8px etc. Remember to expand strokes before saving as an SVG Size Cannot be wider or taller than 100px (artboard size) Scale your icon to fill as much of the artboard as possible Ungroup If your design has more than one shape, make sure to ungroup Save as Save as .SVG and make sure “Use Artboards” is checked 100px .SVG