Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm starting with SVG files in my websites and I'm really wondering when to use the SVG code or the SVG image.
When I save a file from Illustrator as SVG I have two options:
I can save the image
I can export to code.
I could use either. But when do I use what? Is is smarter to use the image in my website or do I use the code?
With all the current knowledge I have I should use the code because that is way lighter (kb's). Or should I use the image as a fall-back?
If you want to make use of the capabilities of a vector graphic (scalability, accessable elements, css styling,...) than you should save the code, what essentially is the graphic.
I personally prefer to insert the code directly into the html, so I have all options for script access and css styling.
However that has some downsides: no image cache, removal of non unique ids (if there are multiple svg embeded), style attributes which prevent from styling with css.
I found SVG cleaner very useful to generate clean and useful svg-code after the creation of the image.
If you do not need all that stuff and just want to display the graphic the use of the <img>, or via css background is the way to go, since that enables the browser to cache everything and saves you from all the clean up huzzle.
If your vector graphic contains a lot of effects which have to be rasterized (some illustrator filters for instance), or embedded images, than the final svg might be larger than an pixel image, since the data is embedded as base64 encoded string what adds ~20% to the filesize.
So the use of an png or jpg might be the right choice in that case.
To sum it up: it depends on your needs and characteristics of the graphic.
I hope I could help...
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I am making an application using Node.js and Express. I am able to save files to the server using multer, however while sending responses I have two options,
Send the URI of the image in JSON, and let the front-end call this to display the image.
Send the image data using some form of encoding like Base64 as part of JSON.
Since I am new to web development, I am confused as to which option to use. Some people have said that the first option requires two API calls, so can be slow. While I have also heard that the second option will take up more memory resources.
What other things should I consider while choosing, and is there any other way of sending images to the client side?
Option 1
Is less complex since no conversion is needed. These 2 API calls won't slow you down. The image size is way more important!!.. The file can be stored/accessed directly on filesystem and served from there. Also a filedownload is implemented in a short period of time. Also the base64 encoding makes the file roughly ~33% (!!) bigger what has a huge impact on large files regarding performance.
Option 2
Base 64 is more secure as nobody can link to your website as described here .
You only need to use base64 for security reasons OR if you have to transfer the image data as string if you cannot transfer it as binary.
Use Case
If this is your private non-productive project just try out both and use the one you like. In the end you are learning something.. It's only important to stay consistent !
If one option fits better to you, just implement it the way you like. You can always refactor a given part of the application later when you may have more experience or when the core parts of your application are finished. Sometimes, after working a while with one of the techniques it gets more clear which approach to use.
For learning it's sometimes better to go ahead, and implement something what works
and start to refactor as problems occur. Rather than overengineering small
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
It is possible way that PSD file can convert into SVG file or using thirdparty software without sacrificing quality i found this website but for image to vector.
I only need coverter or plugins for Photoshop or in Illustrator export as SVG
I suggest to you use the free vesion of that website vectormagic just save your psd to image then process it to vectormagic website but remember almost 20% of quality is sacrifice because this is vector, to be sure for best result quality make an image with solid color or vetorized images without shadow blue or glow.
If you're knowledgeable in Illustrator here the plug in from Adobe but then Illutrator is different in Photoshop.
I think this is a 2-part question and requires a 2-part answer. Assuming you're going strictly from raster graphic to vector:
You have to get a good raster to vector conversion. Illustrator is good for this if you import your raster into AI and play around with tracing. You'll get decent results, but nothing beats doing the conversion by hand or starting from a vector to begin with. -- If you're starting with vectors already, you can just copy your shapes and paths to Adobe Illustrator (AI).
Once you have your vector is in AI, it's just a matter of using Save As : SVG. If you're using it for web, SVG 1.1 profile is the best option since it's the most compatible with browsers.
2B. If you're doing multiple vectors at once, place each vector into its own artboard inside AI. Once you've done that, you can fit each artboard to the artwork so that the canvas hugs your art. Save As SVG and choose the option "use artboards." -- This will save all the vectors within that AI file as individual SVGs and will use the artboard names a file names.
NOTE: while you can use plug-ins and automated converters to do this, doing it manually will result in the best quality output.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a tool that will let me draw out a map of dependencies for applications, servers, etc. We have a lot of servers and a lot of databases, and no way of tracking what depends on what. Note that I'm not talking about code or class dependencies within a project, but rather dependencies on servers, databases, and so on.
When I sat down to create a sample map, I ended up with something like this:
Now, the problem I have with doing this on paper or in MS Paint is that the layout is not adjustable. For example, if I took a node in the above example and moved it, I want the other lines and nodes to adjust to the new position of the one I just moved.
I checked out some "mind mapping" applications, like FreeMind, and found it to be too restrictive. For example, in that application, you can't just freely draw stuff and connect it, you have to specify nodes and their relationships (child, parent, sibling). Also, there was no ability to comment on anything. For example in the above image, I'd like to be able to include comments for each thing in the map, but have them be hidden until that object is clicked. In this way, I can write a lot of text regarding the relationship and it's history, without muddling up the map.
At the most basic level, all I want is a super simple application that will just let me draw squares, insert text (and hidden comments) in, and connect them with arrows, and then allow me to move the squares around and have the surrounding squares and arrows adjust automatically.
A good tool for making general diagrams of this sort is GraphViz. You specify the input as a .dot file, containing instructions similar to (for your example):
digraph G {
web_app -> server1
web_app -> sql_database
web_app -> repository
server1 -> esx_server1
...
}
(There are many formatting directives, such as proper labels you would use on the vertexes, rather than the short names I've used above.)
Then run a command line tool to lay out the graph as an image. There are many layout algorithms, so often you will use trial and error to find one which works best for your graph.
GraphViz can do a reasonably good layout job on many graphs. But the great thing about it is the text-based input; it's easy to autogenerate the input from a program, or keep it in version control, etc.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
About SVG: is it old technology? I mean maybe after year it will die (will be forgotten)? Is it good to use SVG in new startups for vector graphics? how well SVG is supported by browsers and developers? Can i find reach libraries and good books about it?
Thank you for any advice!!!
All major browsers support SVG quite well, except IE. IE9 will bring SVG support, but not the whole spec (SMIL and filters won't be available for example). Moreover, recent JavaScript performance improvements also benefit SVG.
I don't think it will die soon. Actually, it has not been usable in web projects until now due to the lack of browser support. But as soon as IE9 is available, I predict the rise of the use of SVG. For sure it won't be dropped in the near future.
Some major companies already use it. Google Maps does, and falls back to VML (an old IE specific vector graphics language) if needed.
Canvas is its main competitor, but there is a big difference between both: Canvas is an API and SVG is a document that you can modify through the DOM.
You don't need libraries since SVG is XML. Just write it like you write HTML.
So it might fit your needs, depending on your application.
SVG was first introduced in 2001 with SVG 1.0. It hasn't died yet.
I would suggest starting with the Wikipedia article on SVG: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Which should answer most of your questions. I can't be more specific about whether its a good fit for your application as I have no idea what your application specifically is.
Lack of SVG support on IE 6-7-8 can be mitigated with plug-ins like Adobe SVG Viewer, Batik (running as an applet) and SVGWeb (a Flash based plugin). The Java web framework ItsNat integrates all of them (and of course native SVG), SVG code can be added to your pages inline into HTML or pure SVG pages (using iframe/object/embed/applet into your HTML).
Take a look to examples here and here (see child nodes). Note: because a bug in Batik applet support SVG events are not working (fixed in v1.1)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've been a web developer for quite some time, and I am used to transforming all my designs into the png file format in order to build my webpages. Despite the fact that png, contrary to jpg, allows transparency in the images, is it a better solution?
The question regards page loading time and best webdesign practices, as well as file size versus quality of the images.
What do you think is the best solution to use?
It depends.
PNG is better for crisp images with a low number of colours,
JPG is better for a low-bandwidth image - however it is not as crisp and therefore not very good for GUI.
Generally, JPG is for photos and pictures, whereas PNG (or GIF) is for layout.
You may find this page interesting, as it goes over the basics of PNG vs GIF.
Google has written about it very well. From Selecting the right image format, you can find a flow-chart to make the decision:
Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more [ducks!]; It's really far more useful to think about what you are trying to achieve with the resources you have at your end: For example is bandwidth limited? Then tending towards heavier compression is a no-brainer. Is the graphic content of the site going to expand, ensuring that the cost of server space will increase over time? Then tending towards heavier compression will delay that cost. Is it an art portfolio site? Then -- aha! -- compression artefacts in the sampler work may actually be desirable! Are you trying to flog a game? Then the screenshots should probably be ultra-crisp.
Generally, then, I would repeat what has been said, although perhaps in slightly different language: For site furnishings, which tend to be computer-generated and will be cached for re-use between pages, tend towards png; For site content, which will often be page-specific and likely large and complex enough to mask lossy compression, tend towards jpg.
With specific reference to switching to png where you decide it is appropriate, run everything through PNGCrush as a matter of course -- otherwise they won't get displayed with the colours you expect in every browser and the overall quality of your design will be diminished.
"Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more "
According to the website SEO optimisation, Google rank your website worse if page load time is above 2 seconds, so compression is necessary, especially on new website designs heavy on graphics.
jpg is usually preferred for photographic images that have a lot of subtly different colors. png works well with computer generated graphics.
That's my rule of thumb.
I am a starter and mostly what I do is if the image is too big I make small unless it's a background image. And if it is for layout I choose PNG and JPG for pictures.