SVGs


Web Development

Updated Jan 19th, 2021

Scalable. Vector. Graphics.

WordPress Media Library Does Not Support SVG Uploads? This is because of security. svg is basically code. use within theme folder.

Cleaning up SVG’s: Strip down and compress as much as possible. Set bounding box / view box. Add if there is not one, (view box=”0 0 height width”). Remove fill to target with CSS? Flatten. No decimals? (may not be able to do this without distorting the path).

Use shape tools to reduce any overlay

Ctrl+alt+G makes a frame from a group. get rid of unnecessary groups

Use optimization tool like svgomg

Three modes of svg: object (embed, object, iframe), image (img tag, css background: url), and inline.

Object mode: standalone file, no control from outside.

Can display as an image tag (same as .png or .jpg) or directly in your html/markup. Setting an an image you can set width inline or via a class in CSS. Putting SVG Path right into markup/html gives you more control, saves an image request for browser, and comes with the added benefit of being able to animate with CSS and JS.

To help reduce/organize SVG code in your markup you can implement the “use” tag and href=”#” and put the code at the bottom. You also need xlink:href=”#” for safari (deprecated in all browsers but Safari)

If your logo has type and it’s only shown on the page a few times, use an svg as loading in a entire font would be silly.

Logo type: crazy drop shadow fill and stroke, can you accomplish in CSS?

Can create a handwrite effect by animating.

This was a good tutorial here and you can tell this guy really knows his shit.

Checkout GSAP (by greensock) for Advanced Animations that makes CSS Animations more like After Effects.

Circle tags (r stands for radius, cx where center is on x-axis and cy where center is on y-axis). rect tag (stands for rectangle). Don’t need to add px after numbers as it is assumed. Fill, stroke, and stroke-width are properties. preserveAspectRatio set to “none” distorts on resize.

Viewport versus Viewbox

Viewport: set dimensions of what you’re looking at whole space. viewbox usually starts with 0 0 followed by a height and width so it’s four numbers in a row similar to setting margin in CSS. The first two numbers of the viewbox control position and panning left and right. The last two numbers control the zoom so if 0 0 300 300 is the base-case then 0 0 150 150 zooms in and 0 0 600 600 would zoom out.


Top