svg   48747

« earlier    

Creating Accessible SVGs
Based on these results, it is clear that not all SVG patterns are created equal when it comes to accessibility. Which pattern you choose to implement depends on many factors like how difficult it is to modify baked-in framework code and which browsers/screen readers you are targeting. But no matter which pattern you choose to use, be sure to set aside some time to do your own accessibility/user testing. As SVGs continue to dominate the visual world, it is important not to leave AT users in the dark!
fridayfrontend  svg  accessibility  cssbasics 
yesterday by spaceninja
SVG shape-rendering: crispEdges
shape-rendering: auto (left) vs shape-rendering: crispEdges (right) in
Firefox  SVG  from twitter_favs
yesterday by Shepazu
shape-rendering: auto (left) vs shape-rendering: crispEdges (right) in
Firefox  SVG  from twitter_favs
yesterday by Shepazu
How to Scale SVG | CSS-Tricks
So forget height and width. You don't actually want to set the exact height and width anyway, you want the SVG to scale to match the width and/or height you set in the CSS. What you want is to set an aspect ratio for the image, and have the drawing scale to fit. You want a viewBox.
#The viewbox attribute

The SVG viewBox is a whole lot of magic rolled up in one little attribute. It's the final piece that makes vector graphics Scalable Vector Graphics. The viewBox does many things:

It defines the aspect ratio of the image.
It defines how all the lengths and coordinates used inside the SVG should be scaled to fit the total space available.
It defines the origin of the SVG coordinate system, the point where x=0 and y=0.

The viewBox is an attribute of the <svg> element. Its value is a list of four numbers, separated by whitespace or commas: x, y, width, height. The width is the width in user coordinates/px units, within the SVG code, that should be scaled to fill the width of the area into which you're drawing your SVG (the viewport in SVG lingo). Likewise, the height is the number of px/coordinates that should be scaled to fill the available height. Even if your SVG code uses other units, such as inches or centimeters, these will also be scaled to match the overall scale created by the viewBox.

The x and y numbers specify the coordinate, in the scaled viewBox coordinate system, to use for the top left corner of the SVG viewport. (Coordinates increase left-to-right and top-to-bottom, the same as for identifying page locations in JavaScript). For simple scaling, you can set both values to 0. However, the x and y values are useful for two purposes: to create a coordinate system with an origin centered in the drawing (this can make defining and transforming shapes easier), or to crop an image tighter than it was originally defined.
css  design  webdesign  scale  svg  ****  howto 
yesterday by gpe
A Practical Guide to SVGs on the web
This guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.
design  webdesign  guide  images  svg  reference  **** 
yesterday by gpe
Your Plan, Your Planet - Home page
Great narrative with beautiful illustrations and interactivity
Google  Reference  WebDesign  Design  Inspiration  Awesome  Animation  storytelling  IxD  SVG  CSS  Illustration 
yesterday by rasagy

« earlier    

related tags

*****  ****  ***  2019  a11y  accessibility  amcharts  animals  animation  api  architecture  aria  art  article  assets  awesome  background  backgrounds  cad  chart  charts  code  codepen  coding  color  compendium  component  conversion  converter  cool  css  cssbasics  curve  design  development  dimension  dimensions  documentation  dom  download  downloads  drawing  editor  effects  emoji  example  filter  filters  firefox  focusable  fontawesome  fonts  framework  free  freebies  fridayfrontend  generator  gif  google  gradient  graphics  guide  howto  html  icons  ie  illustration  illustrations  illustrator  image  images  inspiration  interface  issue  ixd  javascript  js  latex  library  lottie  measurement  ml  objects  odometer  online  opensource  overlay  patterns  photographs  presentation  production  programming  prototyping  react  reference  rendering  repeat  repo:github  repository  resources  rpg  rust  scale  seamless  shapes  sketch  smil  snap  stock  storytelling  stretch  tex  tips  tool  tools  typography  ui  usability  vector  vlzfeature  vlztodo  web-design  web  webdesign  webdev  writing 

Copy this bookmark: