URL: https://vecta.io
Purpose: An SVG diagramming tool for teams. Draw flowcharts, symbols. We emphasize on precision and collaboration.
Technologies: Javascript, PHP, Node.js, Firebase.
Feedback: Usability, Copywriting, Features or Integration you want to see. Comments: Disclaimer: I'm part of the team that did this web app. Our SVG framework is in-house. Think of it as a collaborative diagramming tool you can use to do great things with your team. Do give our web app a try (We're in beta) and tell us what you think.
EDIT: Template markup.
A really old weighing balance without the plates. They used to have numbered weights (lil metal coins) that you would put in one plate against the object you wanna measure in the other.
https://vecta.io/symbols/319/human-other/44/weighing-scales-1
Hi u/SardaarG
I found one website some time ago when I wanted to make a personalized gcp teeshirt for myself. Although it doesnt look like an official google icon from google, the definition after downloading the icons are very good. You can download the icons either .SVG, .PNG or .JPG
Checkout the website here: https://vecta.io/symbols/4/google-cloud-platform
File size is normally due to character length, and Illustrator exports with a lot of superfluous attributes like id
, data-name
, and other metadata that has no bearing on the appearance itself. I think 212 down to 15 probably isn't possible but a few things you can try:
path
, d
, or class
/style
. Specifically headers in svg
, then in each layer data-name
, id
. Sometimes AI will also include a transform
attribute that is redundant like transform="rotate(0deg)"
<g>
tags (can be done manually, or place all artwork on a single layer and don't use groups so it doesn't generate new tags per group/layer)I haven't tried these because I use libraries in my own code and don't need websites, but what I'm talking about is like:
To be honest none of these are compression or minifiers. I don't see a proper web app for those, these all look like optimizers that strip out the same attribute data I mentioned before.
I make panels and scripts for Illustrator. If I have some time in the upcoming week I may sit down and try to create a drag/drop panel for AI that produces a true minified, compressed, and optimized SVG
I would say if it’s just a few logos, svg v png won’t make huge differences for speed if the file size is the same.
But personally, definitely svg for scalability, and it’s just faster.
“Depending on your use cases, SVG can offer anything from 60% to 80% bandwidth savings, higher image quality, faster loading and a simplified workflow.”
The solution I decided upon was to add them inline.
Note that this is a pretty steep learning curve, unless you just want to add the unaltered SVG XML. At the very least, pass them through Nano first, or put SVGO into your Node toolchain.
I built a site last year which had the SVGs sitting on the server, but included them as markup using @@include. But getting the markup down to a manageable level taught me a lot.
URL: Vecta.io - Team diagramming tool with advanced SVG editor
Purpose of Startup: To help teams work better together, to communicate visually and clearly.
Technologies Used: SVG, Javascript, Firebase
Feedback or Support Requested: User experience & usability
Comments: Would love to listen to any sorts of feedback/ comments on Vecta.io, we want users to like it and find it helpful to them.