recentpopularlog in

piperh : vector   108

« earlier  
Snap.svg - Home
they say: SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
svg  animation  animate  animated  js  javascript  script  vector  webdesign  web  design  webdev 
12 days ago by piperh
Humaaans: Mix-&-Match illustration library
they say: humaaans
Mix-&-match illustrations of people with a design library
illustration  image  library  design  graphic  vector  editable  people  drawings 
14 days ago by piperh
CSS { In Real Life } | Optimising SVGs for the Web
by Michelle Barker showing methods to optimise svg's, tips, relationship of artwork bounds to viewbox, inline use, and some other relevant resources
webdesign  web  design  svg  vector  optimise  optimisation  performance  css  inline  code  coding  illustrator  icon  symbol 
23 days ago by piperh
Icon Font & SVG Icon Sets ❍ IcoMoon
tons of icons available as fonts or svg. Michelle Barker says that icomoon will make sprites.
webdesign  web  design  graphic  icon  icons  app  online  font  svg  vector  free  glyph  sprite 
23 days ago by piperh
Line Awesome — Free Beautiful Icon Font
their strapline: Swap Font Awesome for modern line icons in one line of code. Tons of useful icons in simple line style
webdesign  web  design  graphic  icons  symbols  illustrations  images  line  drawings  vector  font  awesome 
24 days ago by piperh
Paaatterns! for Free
they say: Free collection of beautiful patterns for all vector formats
pattern  webdesign  web  design  graphic  inspiration  vector  image  collection  library 
7 weeks ago by piperh
SVG Viewport and viewBox (For Complete Beginners)
Useful explanation of svg viewport and viewbox.
Viewport is described by width='' and height='' (no viewport attribute).
viewbox='' is described with its attribute and 4 space-separated values:
x y (panning), then zooming.
webdesign  web  design  svg  viewbox  viewport  size  pan  scale  zoom  image  vector 
9 weeks ago by piperh
Home - SVG Artista
tool to create code for svg animation - you can open your own svg and the app animates outline and fill
graphic  web  design  svg  animate  animation  outline  stroke  fill  illustration  vector 
november 2019 by piperh
Fresh Folk
An illustration library of people and objects
illustration  library  archive  people  objects  drawing  vector 
november 2019 by piperh
Variable Color Fonts, how do they work? - Learning with Typearture
Shows basics of variable color fonts. Important aspect of course is that the glyphs can be bezier illustrations and make custom fonts which are then easy to distort/manipulate with css in the page.
webdesign  web  design  font  variable  colour  color  glyph  vector  bezier 
november 2019 by piperh
Images done right: Web graphics, good to the last byte — Martian Chronicles, Evil Martians’ team blog
fairly in-depth look at image formats for the web and best compression techniques for performance and quality
webdesign  web  design  image  img  jpg  webp  png  svg  compression  performance  graphics  format  optimisation  optimise  vector  raster 
october 2019 by piperh
Isometric | Download free isometric illustrations
Free isometric illustrations for designers, startups and companies. In svg
svg  graphic  design  web  illustration  business  archive  library  collection  vector 
august 2019 by piperh
Iconfu - Get Icons in your Color and Style
a library of vector icons. Nice professional images but not all free. Free collection is called 'Material'
icons  vector  library  graphic  design  web  colour 
february 2019 by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js.
Works well but hover effect uses mouseenter so you must leave and re-enter to get back to original shape. How to activate on mouseleave?
webdesign  web  design  icon  transition  two  2  svg  vector  animation  animate  morph  tool  online 
september 2018 by piperh
How to Hand Code SVG
tutorial on hand-coding svg shapes: "... you can hand-code simple shapes quite easily, without needing to open a graphics application."
webdesign  web  design  graphic  vector  svg  hand  code  coding  inline  shape  element 
april 2018 by piperh
Tracy — From Paper to Vector
drag & drop online auto tracer, converts image to vector. Not tested, no idea how good it is.
scan  trace  vector  auto  online  app  application  svg  tool  image 
february 2018 by piperh
free and continuously growing library of svg and png icons
webdesign  web  design  graphic  svg  png  icon  library  free  illustration  vector 
january 2018 by piperh
Fundamentals of Responsive Images | Lullabot
article titled: Fundamentals of Responsive Images
webdesign  web  design  responsive  images  picture  srcset  sizes  method  vector  raster  breakpoints  code 
october 2017 by piperh
Feather – Simply beautiful open source icons
collection of open source icons. Rather web, techy, oriented, but adaptable.
web  graphic  design  icons  vector  free 
august 2017 by piperh
56,000 Free Icons - The Largest Icon Pack Ever
big collection of icons. Free only in png. Payment by subscription model - I s'pose this means they aim only at web designers
web  graphic  design  icons  flat  vector 
august 2017 by piperh
All country flags in SVG
The flags of all countries available as PNG and SVG.
webdesign  web  design  graphic  illustration  svg  flags  country  png  vector 
june 2017 by piperh
Feather – Simply beautiful open source icons
collection of excellent simple open source icons in svg format
webdesign  web  design  graphic  vector  icon  symbol  resource  ui  illustration  svg 
june 2017 by piperh
An Overview of SVG Sprite Creation Techniques ◆ 24 ways
description, with howto's, of different methods of spriting svg's and using in your site, both as inline and as external svg file
webdesign  web  design  svg  sprite  technique  method  inline  css  external  icon  image  vector  browser 
june 2017 by piperh
Align SVG Icons to Text and Say Goodbye to Font Icons
useful technique for sizing and aligning svg icons to font baseline
webdesign  web  design  font  icon  svg  vector  inline  illustration  drawing  align  baseline  alignment  sizing  aligning  size  em 
february 2017 by piperh
Simple Icons
lots of well-known company trademark icons in svg format, with colour ref. Web/tech company emphasis.
webdesign  web  design  graphic  icon  free  svg  vector  service  media  brand  logo  format  company  trademark  colour  resource 
january 2017 by piperh
Free vectors, photos and PSD Downloads | Freepik
Image library with free and premium (subscription) models. Lots of vector illustrations and icons
freepik  graphic  design  image  photo  vector  icon  illustration  free  royalty-free  archive  library  bank 
january 2017 by piperh
Tips for Creating and Exporting Better SVGs for the Web
article by Sara Soueidan about creating vector illustrations for later animating on the web. Highlights difference between shape and path and resultant vector svg code.
webdesign  web  design  graphic  illustration  ai  svg  vector  path  outline  shape  illustrator  export  format 
december 2016 by piperh
vivus.js - svg animation
vanilla js script for animating svg paths, so they look like they're drawing themselves
webdesign  web  design  draw  path  line  svg  animate  animation  drawing  illustration  vector  js  javascript  script  graphic 
december 2016 by piperh
Creating the Invisible Pen Effect in SVG using Vivus.js
tutorial on using a js tool for creating animated path drawing of svg's
web  graphic  design  animation  svg  animate  animated  path  vector  drawing  illustration  draw  invisible  pen  inline  js  javascript 
november 2016 by piperh
the new code – Understanding the SVG viewBox
useful clarification of svg viewBox (sometimes known as canvas) relating to position of drawing which is contained in the viewBox. It also demonstrates how svg units are relative to one another.
webdesign  web  design  graphic  svg  illustration  vector  viewbox  canvas 
october 2016 by piperh
complete and attractive, nicely designed free svg vector icon set
web  graphic  design  illustration  icons  svg  vector  symbols  iconset  icon  free 
october 2016 by piperh
Hero Patterns
free vector svg backgrounds. The web page has nice slider control to try different colour combinations
web  graphic  design  background  svg  repeatable  repeat  vector  illustration  pattern  repeating  line 
october 2016 by piperh
A Guide to Making SVG maps with MapShaper - Resources |
tutorial on making vector maps and exporting to svg. Also has list of resources, some free, for map data. The guy uses esoteric editing software so perhaps this page is mostly useful for the map resources
design  illustration  svg  maps  resources  howto  tutorial  software  vector 
october 2016 by piperh
The best free graphic design software | Creative Bloq
list of free graphic software - some of it seems usable and useful, not just your typical special effects application
graphic  design  software  free  drawing  retouching  pixel  vector 
october 2016 by piperh
SVG has more potential · MadebyMike
article showing some potential of svg, and rather esoteric, complicated use cases
webdesign  web  design  css  svg  html  code  coding  vector 
october 2016 by piperh
Animating Vectors with SVG ◆ 24 ways
good resource with tips about using svg's for older browsers, and how to animate
webdesign  web  design  svg  vector  animate  animation  animated  illustration  illustrate  draw  drawing  line 
september 2016 by piperh
Svgsus: Tips & Tricks – Medium
app to convert any vector file to svg, clean the svg
webdesign  web  design  svg  vector  icon  illustration  format  organise  clean  optimise  code 
september 2016 by piperh
Practical SVG · An A List Apart Article
article about sizing svg's on fixed and responsive. Also touches on the drawing in vector progs and how the artboard affects the web rendering
webdesign  web  design  graphic  svg  size  sizing  viewport  viewbox  aspect  ratio  max  min  css  responsive  vector 
august 2016 by piperh
Font Hacking | HeydonWorks
Modifying a font using a vector prog, and subsetting. If you use the technique be sure to look at comments, esp re kerning and hinting and default font fallback sizes on diff OSs
webdesign  web  design  webfont  type  typography  character  modify  hack  vector  svg  inkscape  subset  subsetting 
july 2016 by piperh
SVG Vector Effects - Call Me Nick
article about scaling svg's without scaling the stroke width. Could be very handy if reducing large icons or other graphics and keeping stroke width the same across a responsive site. And, eg, for Tria label diagrams, would mean not needing fat lines at large responsive sizes
webdesign  web  design  vector  svg  scale  stroke  width  size  graphic  scalable  line 
july 2016 by piperh
Tools And Resources For Editing, Converting And Optimizing SVGs – Smashing Magazine
roundup of svg editors and tools with lots of links to resources and software, both for originating and for converting images
webdesign  web  graphic  design  illustration  vector  image  svg  export  convert  conversion  converter  howto  resources 
may 2016 by piperh
Convert Picture to Svg - Picsvg
online photo to vector converter. Outputs svg
web  graphic  design  convert  converter  photo  image  svg  vector  picture  bitmap  autotrace  conversion  auto  trace 
may 2016 by piperh
Home | Inkscape
free open source vector drawing software for mac, windows, linux
graphic  web  design  drawing  vector  software  illustration  image  graphics  editor  free  opensource 
may 2016 by piperh
Boxy SVG Editor
native svg vector editor, can use in osx (and others) or within chrome
tool  chrome  osx  browser  vector  svg  draw  drawing  edit  editor  graphic  web  design  path  bezier 
april 2016 by piperh
Optimises svg files and code. After you upload an image you can see all the optimisation options.
Author says: based on SVGO and given a GUI.
webdesign  web  design  svg  cleanup  optimise  code  online  tool  performance  vector  image 
march 2016 by piperh
online tool to optimise file size of SVGs
webdesign  graphic  web  design  svg  optimise  optimiser  optimize  optimizer  vector  file  size  reduce  minimise 
march 2016 by piperh
Optimising SVGs for Web Use — Part 1 — Medium
article about making optimised svg icons - use less nodes and less handles, and whole numbers (integers).
webdesign  web  graphic  design  vector  svg  howto  draw  optimise  tips 
january 2016 by piperh
larsenwork/social.svg.min · GitHub
small collection of highly optimised vector svg icons
webdesign  web  design  svg  vector  icon  logo  optimised  social 
january 2016 by piperh
SVG PORN — 700+ high quality svg logos
collection of free vector icons and logos. Some for commonly used links, some more obscure. Searchable
webdesign  web  graphic  design  icons  logos  svg  scalable  vector 
january 2016 by piperh
neutraltone/awesome-stock-resources · GitHub
A curated collection of links for free stock photography, video, Illustration, icon and font websites.
web  graphic  design  free  resources  photo  image  library  libraries  archive  vector  type  fonts  photography  icons  iconfont  illustration  stock 
november 2015 by piperh
The State of SVG Animation : Adobe Dreamweaver Team Blog
june 2015, svg animation not supported in any version of explorer
webdesign  web  design  svg  animation  effects  vector 
june 2015 by piperh
Precision Bitmap To Vector Conversion Online - Vector Magic
in article by Affinity creator he mentions this as the best. Converts bitmap to vector - autotrace type tool
graphic  design  tool  autotrace  auto  trace  drawing  vector  online  mac  pc  photo  image  convert  converter  conversion 
february 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read