piperh + svg   149

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 
23 hours ago by piperh
CSS Circles - Cloud Four
different ways of coding circles
webdesign  web  design  css  circles  code  coding  clip  border  shape  svg 
23 hours ago by piperh
Minify Your SVGs - victorzhou.com
short piece about minifying svg's - only interesting for showing the minimum necessary code needed to render an svg. No viewbox etc
webdesign  web  design  svg  optimise  optimisation  code  performance  webdev 
4 weeks ago by piperh
Get Waves – Create SVG waves for your next design
online tool, creates waves and generates svg code. When would you want this?
generator  tools  svg  webdesign  web  design  graphic  waves  illustration  image  shape 
7 weeks ago 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 
8 weeks ago by piperh
Color Fonts - Get ready for the revolution!
article about current of colour fonts and svg opentype (June 2019)
webdesign  web  design  graphic  type  typography  font  colour  color  svg  opentype 
june 2019 by piperh
SVG Properties and CSS | CSS-Tricks
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity.
webdesign  web  design  css  svg  code  coding  inline  style  styling  apply  applying 
june 2019 by piperh
SVG Sprite Generator
online svg sprite creator - drop SVG files to create the sprite
webdesign  web  design  sprite  svg  online  tool  creator 
april 2019 by piperh
Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks
an animated mask/reveal effect on svg text using clip-path and mask
webdesign  web  design  svg  animation  clipPath  clip-path  animate  mask 
february 2019 by piperh
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
Ways to colour svg, inline or as img. Interesting info and ref about svg and css filters, and a weird way to specify rgba colours using matrix
webdesign  web  design  code  coding  colour  color  filter  css  svg 
february 2019 by piperh
Pie Charts · ChartGen
brilliant chart generator - you input the data, gives code as svg. Pie charts, bar graphs, line graphs. Would be great for PIRC charts. Use image in Quark to draw on top, or import svg file into Affinity.
webdesign  web  design  graphic  chart  generator  bar  graph  line  pie  svg 
january 2019 by piperh
Squoosh
they say: Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors. A google project.
Anselm Hanneman says: lets you optimize images perfectly in your web browser. It’s made by the Google Chrome team and as a bonus you can also resize the image and choose which compression to use, including mozJPEG and WebP.
Doesn't work with Epic - use Firefox or Chrome.
squoosh  image  compression  compress  photo  artwork  svg  tool  google 
november 2018 by piperh
How to Use SVG Patterns as Backgrounds
1st para: SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them
webdesign  web  design  background  svg  css  pattern  image 
november 2018 by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
november 2018 by piperh
SVG Marching Ants | CSS-Tricks
marching ants effect on outlines using svg
webdesign  web  design  graphic  svg  css  code  coding  marching  ants  animation  animated 
october 2018 by piperh
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
transition effects using svg clip path. Support better than css clip path, says author.
webdesign  web  design  clip-path  clip  path  svg  css  effect  transition  clipping 
september 2018 by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js
webdesign  web  design  icon  transition  svg  vector  animation  animate  morph  tool  online 
september 2018 by piperh
3 Ways to Create Angled Edges With SVG
they say: In this tutorial you’ll learn three ways to create easy angled edges using SVG.
webdesign  web  design  svg  angle  angled  edge  box  shape  background 
august 2018 by piperh
Animated SVG Icons - Lordicon - created for web and mobile projects
animated icons free for download. I think they depend on hover, so don't do anything on touchscreen
web  graphic  design  svg  icons  animated  hover 
august 2018 by piperh
Icon Organizer & Icon Library
they say: Nucleo is a beautiful library of 25011 icons, and a powerful application to collect, customize and export all your icons.
Could be useful to export svg sprites.
webdesign  web  design  graphic  icons  application  app  software  mac  image  svg  sprite 
july 2018 by piperh
Managing SVG Interaction With The Pointer Events Property — Smashing Magazine
about using pointer-events (the svg property) to control where clicks matter and where not
webdesign  web  design  pointer  events  click  touch  svg  ux  ui  effect 
may 2018 by piperh
GitHub - lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript
Animating Elements Along SVG Paths with Javascript.
they say: Sliding elements along SVG paths
webdesign  web  design  animate  animation  svg  js  javascript  script  path 
may 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
A Comprehensive Guide to Clipping and Masking in SVG
article title: A Comprehensive Guide to Clipping and Masking in SVG
webdesign  web  design  svg  clipping  masking  clip  mask  code  coding  path  reference 
april 2018 by piperh
<use> - SVG: Scalable Vector Graphics | MDN
about the <use> element. I think it's valid within svg - allows one to take just a part of an svg document
webdesign  web  design  svg  use  <use>  element  node  code  coding 
april 2018 by piperh
SVG Animation Creator - Animate and Export SVG | SVGator
title says: Animate SVG easily. Import, animate and export. online tool lets you import a graphic, choose animation and will export the code
webdesign  web  design  animate  animation  svg  illustration  graphic  effect  import  export  online  tool 
february 2018 by piperh
About responsive images, best formats and sizes
article title: A Guide to Responsive Images with Ready-to-Use Templates
webdesign  web  design  image  images  format  responsive  jpg  svg  png  inline  64base  resolution  size  webp  compression  srcset  pixel  density  picture  element  source 
february 2018 by piperh
Free customizable SVG Backgrounds
a set of svg patterns for backgrounds. Adjustable on the web page - colour, angle, opacity, scale, and generates the css
webdesign  web  design  background  svg  pattern  code  generator 
february 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
How to Scale SVG | CSS-Tricks
css tricks article about scaling svg's. Particularly handy for me is the para about 'The viewbox attribute'
webdesign  web  design  css  svg  browser  scale  scaling  image 
january 2018 by piperh
GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
page owner says: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
webdesign  web  design  graphic  logo  icon  svg  lightweight  small  social 
january 2018 by piperh
Motion blur effect using SVG filters
nice blur effect on slide change in a carousel
webdesign  web  design  slideshow  carousel  motion  blur  svg  effect 
january 2018 by piperh
IconBros
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
Photopea | edit Photoshop files online
online image editor, accepts native photoshop
image  edit  editing  online  photoshop  sketch  psd  png  jpg  svg  editor 
december 2017 by piperh
Lazy loading with inline SVG
idea for lazy loading: use svg outlines of images that show before the whole photographic image has loaded. Possibly, maybe useful in some circumstance though it's a lot of work just for a few miliseconds of user benefit
webdesign  web  design  lazy  loading  load  image  svg 
october 2017 by piperh
Integrating SVG into your site - Heart Internet Blog - Focusing on all aspects of the web
article about incorporating SVGs into a site. Rather basic but has some code examples
webdesign  web  design  svg  illustration  image  img  object  html  css 
october 2017 by piperh
5 CSS Properties That You Probably Don't Know
useful explanations of lesser-known css, especially handy could be clip-path
webdesign  web  design  css  font-display  writing-mode  contain  will-change  clip-path  svg 
july 2017 by piperh
CodePen - SVG encoded for background-image
a way tu use svg as background image that doesn't require an http request
webdesign  web  design  background-image  background  image  svg  code 
july 2017 by piperh
Stuff at the Top of an SVG – Peter Nowell – Medium
article explaining the doctype and other stuff at beginning of svg code. Shows what can be removed and what can't. Mentions viewbox etc but doesn't explain anything
webdesign  web  design  svg  code  doctype  about  version  xmlns  xml  generator  doc 
june 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
Serve SVG as an Image on Apache with .htaccess
a David Walsh tip to fix non-serving svg problem
webdesign  web  design  serve  server  svg  image  htaccess 
june 2017 by piperh
Serve SVG with the Correct Content Type | CSS-Tricks
Short article suggesting a solution for non-appearing svg in a page
Add this to .htaccess: AddType image/svg+xml .svg .svgz
Also, a further solution noted
webdesign  web  design  htaccess  serve  server  svg  image  code  type 
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
Masking vs. Clipping: When to Use Each | CSS-Tricks
article about clipping and masking and when to use one or the other
webdesign  web  design  graphic  mask  masking  clip  clipping  svg  css  html 
june 2017 by piperh
How to Scale SVG | CSS-Tricks
thorough article showing how to reliably scale SVGs including in Explorer (Edge is OK) using svg as a background image and using the bottom-padding hack to maintain aspect ratio.
webdesign  web  design  svg  scale  inline  background  padding  hack  explorer  microsoft  ie  css  html  scaling 
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
Icon System with SVG Sprites | CSS-Tricks
a method for defining icons using svg sprite as inline svg - one can use it in a php include so it's a nice separate file
webdesign  web  design  sprite  svg  icon 
june 2017 by piperh
Responsive Icons
an svg sprite method for showing icons depending on screen width - the icons change, they don't scale
webdesign  web  design  icon  responsive  svg  sprite 
june 2017 by piperh
Shape Shifter
online svg morphing animation tool - generates the svg's, html and css code necessary for browser.
webdesign  web  design  svg  html  css  morph  morphing  animate  animation  generate  code 
may 2017 by piperh
Creating Non-Rectangular Headers | CSS-Tricks
css-tricks article on 4 methods for angled headers in css and svg and background image. The summary says best is svg.
There's a curious fill: usage that I didn't know about - not clear if it's usable
webdesign  web  design  css  non-rectanular  shape  angle  header  techniques  methods  code  coding  svg  background  border 
february 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
the new code
Dudley Story's site - lots of teaching material, free.
webdesign  web  design  code  coding  css  js  javascript  html  technology  language  teaching  learning  learn  technologies  svg  responsive  php  mysql 
january 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
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
Bye raster, hello vector: 3 ways to use SVG easier · Devbridge
explanation of using sprites with inline svg and other techniques.mcomplex, and some of it depends on using sass, but some useful content
webdesign  web  design  css  inline  svg  sprite  image  url 
november 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
« earlier      
per page:    204080120160

related tags

2off2  3d  64base  <use>  @font-face  about  accessibility  accessible  adaptive  adobe  advice  ai  align  aligning  alignment  alternative  android  angle  angled  animate  animated  animation  anime  ants  app  apple  application  apply  applying  archive  artwork  aspect  auto  automatic  autotrace  background  background-image  bar  baseline  bezier  bitmap  blur  bmp  border  box  brand  browser  business  canvas  carousel  character  chart  chrome  circles  clean  cleanup  click  clip  clip-path  clipPath  clipping  code  coding  collection  color  colour  company  comparison  compress  compression  compressor  contain  conversion  convert  converter  country  create  creator  css  dash  density  design  dingbat  doc  doctype  draw  drawing  edge  edit  editing  editor  effect  effects  element  em  embed  embedding  eot  eps  events  explorer  export  external  fallback  favicon  file  fill  filter  flags  fluid  font  font-display  fontface  fonts  footer  form  format  free  freehand  generate  generator  gif  google  graph  graphic  graphics  hack  hand  hd  header  hosting  hover  howto  htaccess  html  ico  icon  icon-font  iconfont  icons  iconset  ie  ie9  ie10  ie11  iframe  illustrate  illustration  illustrator  image  images  img  import  inkscape  inline  invisible  ios  iphone  javascript  jpeg  jpg  jquery  js  language  lazy  learn  learning  lettering  library  lightweight  line  link  links  lists  load  loader  loading  logo  logos  loop  lossless  lossy  mac  magic  maps  marching  mask  masking  max  media  method  methods  microsoft  mime  min  minifier  minify  minimise  mobile  modify  morph  morphing  motion  mq  mysql  node  non-rectanular  object  offset  online  opentype  optimisation  optimise  optimised  optimiser  optimize  optimizer  organise  osx  otf  outline  overview  padding  path  pattern  pen  performance  photo  photoshop  php  picture  pie  pixel  placeholder  playground  plugin  png  pointer  programme  psd  queries  raster  rating  ratio  reduce  reference  repeat  repeatable  repeating  resize  resolution  resource  resources  responsive  retina  rwd  sara  save  saving  scalable  scale  scaling  scan  script  security  serve  server  service  setting  settings  shape  sheet  simplify  size  sizing  sketch  slideshow  small  social  software  solution  souiedan  source  speed  spinner  sprite  squoosh  srcset  star  sticky  stroke  style  styling  subset  subsetting  svg  symbol  symbols  syntax  system  teaching  technique  techniques  technologies  technology  template  tester  text  texture  tiff  tips  tool  tools  touch  trace  trademark  transition  ttf  tutorial  tutorials  type  typeface  typicons  typography  ui  url  use  using  utility  ux  vector  version  versus  viewbox  viewport  vs  waves  web  webdesign  webdev  webfont  webp  width  will-change  woff  writing-mode  xml  xmlns  zdog 

Copy this bookmark:



description:


tags: