scale   33061

« earlier    

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
Richard Millington on Twitter: "If you want to sustain high-quality in a community, you need to decide which of the four sandpits you're going to play in. It's ultimately about restrictions on who/what members can post and what members can see. Choose car
If you want to sustain high-quality in a community, you need to decide which of the four sandpits you're going to play in.

It's ultimately about restrictions on who/what members can post and what members can see.

Choose carefully.
community  SCALE  design  strategy  online 
3 days ago by edsonm

« earlier    

related tags

!post:twitter  ****  algorithm  amazon  anti-trust  apple  architecture  astronomy  aws  bestpractices  biodiversity  civics  community  comp-sci  consumer  crossingthechasm  crypto  cryptography  css  data  database  design  dimensions  diy  doj  doubleclick  electronics  engineering  experience  fablab  fabrication  facebook  filetype:pdf  foundationdb  fragmentation  google  habitat_management  haproxy  hardware  howto  idiocracy  impact  infographic  instagram  internet  kubernetes  limbo  makerspace  manufacturing  microservices  non-profit  nyt  online  paper  passwords  patterns  platform  platforms  privacy  programming  protected_areas  protection  reference  regulation  regulators  resources  search  self-regulation  size  social  software  space  strategy  svg  tbssmf  tcr  technology  thedarkside  transparency  visualisation  web  webdesign  whatsapp  workflow  youtube 

Copy this bookmark:



description:


tags: