recentpopularlog in

piperh : svg   163

« earlier  
SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features | CSS-Tricks
Seems that SMIL is not a good way to go with svg animation. At end there's a chart of equivalent css and gsap attributes and values
webdesign  web  design  webdev  code  coding  svg  smil  css  gsap 
13 hours ago by piperh
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 
14 hours ago by piperh
Shape Morph Button
an inline svg shape in a button morphs when clicked, using js for the toggle.
Handy, has the html, css and js code, linked from this article:
https://css-tricks.com/svg-shape-morphing-works/
webdesign  web  design  code  svg  morph  shape  morphing 
2 days ago by piperh
Simple Image Placeholders with SVG - Cloud Four
author says: a tiny, dependency-free library called Simple SVG Placeholder. It generates data URIs for placeholder img elements. (uses js)
You get a grey rectangle with image size written in middle.
webdesign  web  design  image  placeholder  generator  svg  js  javascript  script 
3 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 
11 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 
11 days 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 
8 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 
11 weeks ago by piperh
MorphSVGPlugin - Plugins - GreenSock
a plugin that allows animation morphing between svg shapes (and they have to have same number of points)
greensock  svg  morph  tween  animate  animation  effect 
november 2019 by piperh
A Guide to SVG Animations (SMIL) | CSS-Tricks
A guide to smil attributes and values in svg for animation. Animated paths must have same number of data points. Shows shared css and smil attributes.
I couldn't really understand how to start and stop - only got indefinite animation to work
webdesign  web  design  svg  smil  animate  animation  attributes  code  coding  effect 
november 2019 by piperh
Styling & Animating SVGs with CSS
svg and css name spaces - shows svg-only and shared css/svg
webdesign  web  design  svg  css  name  space  namespace  names  code  coding  webdev 
november 2019 by piperh
Clip-path converter
Convert SVG absolute clip-path to relative
webdesign  web  design  svg  clip-path  clip  html  css 
october 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
CSS Circles - Cloud Four
different ways of coding circles
webdesign  web  design  css  circles  code  coding  clip  border  shape  svg 
october 2019 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 
september 2019 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 
august 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
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
« earlier      
per page:    204080120160

Copy this bookmark:





to read