I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
Related
I just started to learn svg. One thing perplexes me is I find some site use svg/path to draw a text logo. Like this one:http://www.desiringgod.org/
The logo is pretty simple itself, however, the SVG it is using contain a horrendous <path> tag where there are lots of numbers.
I understand that with SVG we can scale the logo, but I don't see any difference if this logo is based on a .png file. So what really is the benefit?
Secondly, I don' think something like
<path d="M115.326252,8.93098333 L115.326252,16.3798167 L113.923083,16.3798167 L113.923083,14.96265 L113.878305,14.96265 C113.092947,16.0569833 111.560896,16.5939833 109.858654,16.5939833 C106.367752,16.5939833 103.855367,14.0609833 103.855367,8.63131667 C103.855367,3.20098333 106.367752,0.667483333 109.858654,0.667483333 C112.454152,0.667483333 114.454146,1.91331667 115.390858,5.21765 L113.771894,5.53931667 C113.007521,3.07148333 111.7296,2.12731667 109.943088,2.1273166 ....</path>
is written by human being. This must be generated by something, isn't it?
The benefits of using SVG logos over PNG logos are the following:
Scale to any size, perfect for responsive websites.
Look sharp on retina displays.
Don't lose clarity, except for very tiny sizes (same with PNG).
With PNG files you would most likely need to generate multiple resolution versions of the same image and hope that the original image is large enough to support the future display resolutions (8K for example).
And yes, the path is not written by a human being. It's a standard part of an SVG file. You could also do stuff like export SVG files as HTML5 canvas code with an ink2canvas extension in Inkscape.
Advantages of SVG:
Resolution Independence
Super-Accessible DOM Node-Based API
No Unnecessary HTTP Requests
Easy Interactive Scripting
Read more details on: Why Aren’t You Using SVG?
In here, I will describe some differences between using SVG and PNG from an application perspective:
SVG files are lighter than PNG files when deployed to your
application.
PNG is more efficient as far as UI responsiveness since the file is
already within your application, and there is no scaling needed, but it's heavier than your SVG file.
PNG gives a better focus to photographs or detailed images than SVG.
I personally use SVG for icons and logos and PNG for photographs or detailed images.
SVG offers a way to do full resolution graphical elements, no matter
what size screen, what zoom level, or what resolution your user's
device has.
So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG.
SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf).
The other benefit of SVG is,
When you use images in an html document with the tag, you are defining a file that the user's browser will request. This request will take up bandwidth and require more precious time to download. If your image is instead a set of dom nodes, it cuts that extra HTTP request out, making your website faster and more user friendly.
An SVG XML document of any complexity looks relatively archaic and complicated, and seemingly isn't nearly as easy as just using an image.
My goal: print an SVG to a single page (any paper size) full size from html page in Chrome (Electron).
I'm struggling to achieve this goal, here's my story:
I've generated an SVG that has text in it that should be displayed with a particular font. This is a custom font that I included with css (using Font Squirrel) and is also used for text in the website. When I display the SVG in my website inline the font renders fine.
Inline means it is an element that is part of the dom that you can inspect. Problem with this is that you can't really change the width style without having to rerender the svg. Since I want to print it it would be nice to be able to do just 'width=100%'.
To do this I serialized the SVG to a dataURL and used an and set its src to the dataURL. Now I can set the width like I want. However: the custom fonts don't work anymore!
So I saved the SVG img to file to edit it. Apparently you can include css in the SVG so that's what I did. Then when you open the file directly in browser it works right again. However when you open it in an IMG in a web page the fonts don't work anymore.
Next I tried copying svg fonts directly into the file ( glyph stuff...). Yes this works! Oh, no it doesn't, just in Safari not in Chrome, darn.
For now I'm considering to just rasterize it but that's no neat solution of course.
As you can understand I'm getting a bit frustrated here. Can anyone give me an insight in the SVG font issue or do you have any tips regarding the printing?
Okay I found a solution.
It turns out that files referenced in an IMG element cannot include any outside files for security reasons. So that's why referencing CSS in SVG doesn't work when showing it as IMG.
Also Chrome dropped support for SVG fonts. So even is you copy/paste SVG glyph data inside an SVG image it still doesn't work (really stupid). In Safari this works though.
So you need to reference WOFF font in css as a dataURL (base64). I did try this before but apparently I did something wrong. I tried it again and it works :).
I used FontSquirrel to generate this and I also subsetted the font there to only include the characters I actually need to save space.
It's not very efficient of course having to copy a font instead of referencing, but I can live with that.
The simplest solution is to just not have any "text" in your SVG by converting your text to SVG paths.
You can do this in Inkscape by selecting your text and then going to Path->Object to Path. Then save or export everything into a new file, clear your browser cache, refresh, and now you should see your text.
Hello I have a client who's logo is RP but the 'R' is facing the other way. I have been asked if it is possible to display 'RP' every time it is mentioned on the website to appear the same as her logo, instead of 'RP'.
My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.
Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg
I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it's worth but maybe I'm missing an easy css trick...
Your help would be much appreciated.
Many Thanks
If you can contact with a graphic designer then the designer can make a svg image for you with "RP". That svg you can easily turn to a font using online font converter if you dont have professional software.
And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.
Is as easy as this ... nothing else that needs to be done, but always if the "RP" is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).
The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:
<p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.
However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?
I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.
Is it possible without using background-size?
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible
Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.
+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/
I think that you could use "background:size" property. With it, you can "visually re-scale" background image.
Please look here
I'm looking to use an SVG logo for a website — to make it look great on a responsive design for all devices.
But since there are issues, I want to support as many devices and browsers as possible. Load speed is also an important consideration. How do export settings in Adobe Illustrator fit into all this?
In Illustrator, there are several options for SVG export. Firstly, which SVG profile is best?
I assume SVG Tiny has a lower file size? Do many devices support SVG Tiny? What are the most important differences? (Without having to read this W3 monster.)
Secondly, I assume that the best option for image location is "link"? (See description after exclamation mark.)
Alternatively, how is browser support for the "embed" option?
Thank you!
P.S. There will be a fallback alpha-PNG option, but I want the SVG to
be supported as best as possible. (Come to think of it, a fallback
option — like a JPG — would probably be the best served in this case since alpha-PNG itself needs a solution for older IE.)
Update: There are also more options that can be configured. I am not working with text, so the only relevant one I see is the decimal places. For logos, something to be displayed as maximum 200x200px (so 400x400px on Retina displays), is "3" the best setting? Or "2" to minimize file size?
SVG profiles
SVG 1.0: all modern desktop and mobile browsers support SVG 1.1, so never choose this option.
SVG 1.1: You will almost always want this.
SVG Tiny/Basic: this is a subset of SVG intended for mobile devices. Only a handful of devices support SVG Tiny and not the full spec, so go for SVG 1.1.
Note: SVG Tiny does not reduce the file size, it's just a subset of SVG that is adequate for low processing power devices. It will discard gradients, opacity, embedded fonts and filters.
Erik Dahlström says:
All SVG 1.1 full viewers should be able to display all of the SVG 1.1
Tiny/Basic content (according to spec), and probably all of the SVG
1.2 Tiny content that Illustrator produces too.
Fonts note: if you don't have any text in your image this setting doesn't matter.
Adobe CEF: never use this option of you intend to display it in browsers. It's Adobe's way of embedding fonts in SVG files, as far as I know this is only supported by Adobe's SVG viewer plugin.
SVG: this embeds the font as SVG, which is not supported by Firefox, but is a good option if you intend to support only mobile devices (which usually run webkit).
Create outlines: you will want to do this most of the time, unless you have a large amount of text. If you have a large amount of text you will want to embed the font with WOFF but you will have to do this by hand.
Subsetting:
None: this will negate the previous setting and will not embed any font, if you don't care that the font falls back to some other font in the user's computer choose this.
Only Glyphs used: you will want this most of the time if you choose to embed the font. It only embeds the characters used so it doesn't inflate your file size.
[rest of subsetting]: this is fairly clear, you can choose to include the entire font or subsets of it. It is only useful if your SVG is dynamic and the text might change based on user input.
Images: this only matters if you are including bitmap images
Embed: this is usually what you want, it encodes the image as a data uri so that you just upload one file instead of the svg file with it's companion bitmap images.
Link: use this only if you have several svg files that reference one bitmap file (so it's not downloaded every time it renders the svg file).
Note that linked bitmap images won't display if the SVG is displayed through the <img> tag, because img doesn't allow loading external resources. Furthermore: webkit has a bug that does not display bitmap images within svg files even if you embed them. In short: use a plain <svg> tag if you intend to embed or link bitmap images, don't use <img>.
Preserve Illustrator Editing Capabilities
I prefer to save an .ai file as my source image, and to think of the SVG file as an Export for web feature. That way you focus on reducing file size and have a pristine copy of your vector file with all the editing capabilities. So don't choose this.
Decimal Places
The default 3 is a sane setting and you can mostly forget about it.
However, if you have a really complicated paths with many points lowering this setting to 1 or even 0 will reduce the file size substantially. But you must be careful because bezier segments are very sensitive to this setting and they might seem a little distorted. So if you lower this setting always make sure it looks acceptable in a browser.
Encoding
The explanation behind character encoding is rather technical, and it only concerns svg files with text. The most likely encoding you need is UTF-8, do not change this unless you know what you're doing.
Include slicing data
This adds metadata bloat to your SVG file, unless you plan on opening your SVG file later in Illustrator and finding your slices (if you have them), do not check this
Include XMP
More metadata regarding the file, you can read on XMP here. do not check this
Responsive
Take note that this setting will eliminate the height and width property from your svg root node, assuming you will scale the included graphic via css. In some instances however, you want the individual graphic to declare it's size. Make sure to uncheck this setting in these instances.
Output fewer <tspan> elements
This will be grayed out if you don't have text. SVG does not support kerning tables, so, certain character sequences will seem too spaced out, i.e. AVA. Illustrator works around by adding tspan elements and tweaking character positions a bit. This adds a bit of bloat to the file do not check this unless you care more about file size than text appearance.
Use <textpath> element for text on a path
This will be grayed out if you don't have text on a path. Browsers tend to vary a lot when it comes to placing text on a path, so Illustrator tries to be helpful by applying the rotation and position to the character instead of leaving the job to the browser. do not check this unless you care more about file size than text appearance.
In general, I'd recommend you to look into SVG in general, you will find that it looks a lot like HTML and it allows you to tweak things that cannot be done within Illustrator.
Update to #methodofaction 's excellent explanation.
The export options have changed a little in the current version of Illustrator.
Adobe SVG Viewer is no longer a thing.
But more importantly there is a new setting "responsive" that is checked by default I believe. Take note that this setting will eliminate the height and width property from your svg root node, assuming you will scale the included graphic via css. In some instances however, you want the individual graphic to declare it's size. Make sure to uncheck this setting in these instances.