Illustrator svg icon - which size? - svg

Lets say I am creating an icon in illustrator, which should be saved as an svg. If I create a large nice vector icon, lets say 800x800 pixels, I can always scale it as I want to, and its "easier" to work with. Problem is, when this icon is saved, the file size is big.
If I instead make a small icon in illustrator, on a document size which has the proportions the icon will be used as, lets say 20x20, the file size is much smaller.
So what is good practice when working with icon sizes?
Thanks!

You are mistaken. A vector graphic that is 800x800 should have the same file size (more or less) as a vector graphic that is 20x20. That is because the shapes that make up the file are defined "mathematically" and can be rendered at any size.
If your files have significantly different sizes, you have probably not created a purely vector file. It probably has bitmap images in it. Bitmap image file sizes are greater if the image size is larger.
However, in answer to your primary question, it doesn't really matter what the page size is when creating vector icons. They could be either of the two sizes you mentioned. Or any other size. Whatever dimensions you choose, they should be rendered nicely at any final size you need.

Related

Matplotlib: consistent image size for publications

I want to make publication-quality plots with Matplotlib. The biggest problem I am having right now is to tune the image and font sizes.
When I create a figure with several panels, I usually set a bigger figsize. For example, these three panels are created with a figsize=(12, 6 / 1.618) (pasted from Jupyter Lab, I always save to PDF files).
The lines can be perfectly seen, there is a lot of space, the figure seems nice. The problem is that in my publication this has to be a column-wise figure, so it has to be scaled down. A colum has a width of around ~3.5 inches. When the image is resized, it still looks good, but the axes labels become very tiny and unreadable. Of course, I can just simply start increasing the font sizes until I find a good size, but I would like to have a workflow that allows me to work with the lengths and sizes I have to use.
When I set the image size to figsize=(columnw, 0.5*columnw / 1.618) (so the aspect ratio is the same) as before, and set the font size around 10 (the font size of my publication) this is what I get:
So now the fonts are exactly the size I want them to be, the figure does not have to be reescaled, but the contents of the graph seem to be compressed into a very very tiny space. It just look... ugly.
Then, my question is: why using a big figsize with extremely large fontsizes gives a beautiful, readable figure when scaled, but with the a priori correct figsize without rescaling seems to be ugly? How could I work with real figsizes from the very beginning to obtain something nice?
I read some questions regarding image size with Matplotlib on this site, as well as a pair of blog posts, but I haven't found any information regarding this problem.
Thank you in advance.

live drawing on a svg file, coordinates problem

I am having some trouble drawing real-world objects on an SVG map.
context:
I have a map which I converted to an svg file (inkscape), this map is then displayed on a web-page with 100% width/height.
I then want to draw points on this map, those points have coordinates in mm (on a very different and bigger scale), so I need to apply a scale factor and a conversion to... pixels?
that's where the difficulty is for me, SVG file uses "user units" measure system, it is then drawn scaling everything to the frame where it is loaded, I would like to scale my real-world point coordinates system to a "user units"-like reference system so that such points can be dynamically drawn on the page.
the web page is html/svg + javascript and I am using svg.js library to draw everything on it.
any clue about how to make ma transformation to align everything up?

what is the meaning of "canvas is pixel based" and SVG is vector based

I have gone through canvas and SVG in html5. When it comes to the difference, It is mentioned that canvas is pixel based and SVG is vector based. I have not got what do they mean by these.
Thanks in advance
There is 2 way to register an image in your computer:
Register in pixel: It means that your image is register as a table of pixel. And in every box of your table a color is register. Such images, have a defined size (1 computer pixel for 1 table box). If you want to reduce the size, an algorithm will mix pixel to render a lower size image. And if you want to display bigger than it is you will see pixel or the image will become blurred.
Register in vector: This kind of image do not own a size. Indeed the file format register vector (direction and scale). And when you want to display it, you will specify a size and the computer will process your image to display it. If you zoom on the image (for example a line). You will never see pixels. Indeed every time you zoom, the image is reprocessed and a line stay a line.

expanding a jpeg file's 'pixel' size without increasing the file size?

I'm curating a web site (joomla, as it happens) and I notice that every (jpeg) image file uploaded is stored in a series of 'sizes', of which the largest is~ 25 times the original size. (9k -> 240k) - just to support display to a larger 'view port', I assume. Is there any practical way, either with jpeg transfoms, other common web image formats or any other wacky idea, to build image files with larger pixel dimensions but retaining approximately the same file size as the original?
Why not simply resize the images with CSS/HTML? If you simply resize them without any quality improvement, you are wasting bandwidth by sending the bigger image.
If you are looking to generate lower resolution thumbnails from a single large image, use JPEGMini. Alternatively, Photoshop has an excellent "Save for web and devices" feature that dramatically reduces the size of images with customizable loss.

Performance of rendering SVG images on HTML 5 canvas

SVG images are great for high detailed graphics, but since they consist of a number of coordinates that need to be calculated before rendering, are they potentially bad for performance, say compared to rendering a jpg which is simply drawing an array of pre-calculated pixels?
I use Context.drawImage, and I do not know if the SVG graphics need to be calculated every drawn frame of the canvas or if they are perhaps cached somehow? or maybe I'm worrying about nothing?
The performance will depend on your specific application and the complexity of your graphic, but generally speaking the vector graphics are not going to have a significant impact. Your main bottleneck will typically be in manipulating the pixel data in the canvas; the larger your canvas, the more time it will take to draw.
Unless you are redrawing the canvas every frame however, the only calculations that are performed at all are those made when you initially draw the image. When you are not modifying it, the canvas is effectively nothing more than a static bitmap.

Resources