recentpopularlog in

piperh : svg   137

« earlier  
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 
25 days ago 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 
4 weeks ago 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 
10 weeks ago 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 seem to work with Epic.
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
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
the new code
Very handy web-related tutorials and explanations. formerly demosthenes.info
webdesign  web  design  code  coding  svg  js  javascript  html  mysql  responsive  css  php  server  hosting 
october 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
SVG & media queries - JakeArchibald.com
article about MQs and svg. With useful explanation of the svg's viewport, the difference between an svg inside img element and inline svg and svg in iframe
webdesign  web  design  css  svg  mq  media  queries  rwd  responsive  image  browser 
october 2016 by piperh
Zondicons
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 | Simplemaps.com
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 SVG `path` Syntax: An Illustrated Guide | CSS-Tricks
explanation of svg path, including code. Shows how points, paths and beziers are described. Logical and not difficult to understand, though I reckon it's still best to use a prog like Affinity to draw with. You can then edit the resulting svg code if you want, including placing it directly into the html
webdesign  web  graphic  design  illustration  draw  drawing  svg  code  coding  bezier  syntax  reference 
october 2016 by piperh
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, <code>viewBox</code>, and <code>preserveAspectRatio</code>
in-depth article about svg. Great for understanding viewbox and scaling and clipping. essential reading. One of 3 articles on svg
webdesign  web  design  svg  sara  souiedan  tutorial  viewbox  viewport  aspect  ratio 
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
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset
neat set of icons using svg stroke. Can be styled in the html or css. Includes for inserting all icons into html using <svg> tag
webdesign  web  design  icon  font  svg  symbol  dingbat  inline  html  css  style  file  library 
september 2016 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read