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.
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: 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.