Hey guys! I am looking into SVG objects and CSS objects right now, I am trying to figure out the smartest ways to make the objects and to place them on a website...

Does anyone here have any good advice for me? I am mainly looking for the Quick-fix-ideas and the easy solutions to get things rolling. But I would also like to get a larger understanding about this stuff as-well.

I've been looking at websites online, some are including SVG in the sourcecodes while others are treating svg's as images. The second option is the easiest option, but is it the smartest??

Thanks for reading & thanks for contributing

There are benefits and drawbacks to both approaches so neither is always right.

However, in general you should save SVG and other resources in their binary format and link to them instead of transforming them into a non-binary representation and embedding them. This way you don't lose compression, the initial page loads faster, and you can update the resources without changing the code/html.

If you use img then the resource will be cached by the browser. The images will also be loaded by separate http requests. This means the page may load in images later than the page html/css/other images.

If you in-line everything then nothing is cached and the entire page will load in one HTTP request, but the page will be significantly larger in size. Images can easily be 3-6x larger when in-lined). The page MAY load faster than the above approach the first time it is visited. The page WILL load slower than the above approach if the page has previously been visited and caching is being utilized.

I think working binary resources is just easier to do. No converting. You know what they are. You can pull them from the server if you need to and modify them. I'd go with that.

PS: For mobile users using DATA URI / in-lining will almost always be slower due to the hardware and will also increase their data usage so avoid this.

Thanks a lot for your input, was really well written...You sure know your thing!

My understanding of your post is that I should use the SVG's as regular images. That leads me to the next question, is it better to use images to create shapes that could be made with CSS? (example: a Sale tag)


By the way, I hope you stick around, you are a big contribution in the programmers heaven

This post was edited by ium on Jan 23 2019 04:20pm

Thanks. That I think comes down specifically to preference, context, and your skill level. Think about how long it will take you to complete the work using css vs svg. Then think about how long it will take you to update it. For many objects it is probably going to take you roughly the same amount of time. Personally, I would go with css instead of svg for simple graphics and svg for medium to complex graphics.

Very right, the updates needs to be easy for sure! I guess it is all about finding the right points to hardcode and to simply just make a regular solution.

Makes me think about my custom css stylesheets, I tend to make really big ones... But how much is too much? How much css is preferred okey to load, and is it always calculated in KB's or does the quality of it matter?

Heh, not gonna glue you stuck in this thread, feel free to respond once you have the time & will

Don't worry about the size of your css. Even a large css file won't take much time to load. Just try to make it of a high quality so it makes sense.

Sounds good

I apologizes for all the smileys, trying to stop doing them but I just can't manage to... ;P

This post was edited by ium on Jan 26 2019 07:46pm