I'm writing the documentation for something using some tools that generate html. I would like to embed some high-quality figures into my pages that correspond to:
font size and type should be the same as in the overall html
content;
fully vectorized.
All my figures are generated from LaTeX with tikz. It would be nice to use the same code to generate the figure for html.
I know that svg is supported by browsers but whenever I export my figure to svg, the font type and size are messed up even though I export text as text and not as paths. If the svg has text as text, isn't the browser supposed to print it with the current font type/size?
Is there another way to embed such figures?
The text should be the same size as long as they are defined the same and the SVG diagram is scaled at 1:1.
However, if your SVG has a viewBox, it will probably end up scaled differently, thus affecting the font size. Even if the font size is defined in real-world/physical units like points (pt) or centimetres (cm).
Demo: http://jsfiddle.net/vbYvU/1/
Related
I'm rendering a text svg using handwriting style google fonts. Assume that I must use these fonts.
For this example, lets use Princess Sofia
Setup
rendering text svg to png via cairo svg in python
text svg is being prepared in the browser
The Problem:
When creating a PNG out of the text svg with this font, some part of it is being cut off. The cut off part matches the areas that are not higlighted in the screenshot below:
Rendering result for A (cut off in the screenshot):
Rendering result for P (NOT cut off in the screenshot):
Question
Is there a way to work around this using CSS or JS?
What won't work
"Kerning, stretching, font variants, word and letter spacing options, glyph orientations, baseline shifts and many other properties are not supported" by Cairo SVG
It's difficult to quickly test this without seeing some code reproducing the problem.
However, this may be rectified by using font kerning which can be specified in CSS using the font-kerning property:
font-kerning: normal;
Setting font-kerning to normal achieves the following effect:
Font kerning information stored in the font must be applied.
The default is auto, which allows the browser to decide whether to use font kerning or not. Forcing it to normal means that the kerning specified in the font itself will be used.
The docs for font-kerning can be read here.
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.
I want to use a highly responsive logo text with a custom font. I realised that almost every browser is not supporting SVG fonts, which means that it's not an option: http://caniuse.com/#feat=svg-fonts.
What options are there and what is the right way of solving the problem?
I could add an image with high resolution and scale it down?
Just use Header-tag? But how could you scale it based on the width of the screen?
Is there a vector based option other than SVG?
The fact that your logo is only letters doesn't mean that it has to be letters. In reality, they are just shapes that resemble letters.
Make an svg shape, or a large enough .png and you can scale it as you like.
People don't care if it is pure text, svg, png or jpg, they will read it anyways. And I believe nobody will try to select it or copy-paste it, and if you want it to be readable by screen readers, just add it's texts in the alt attribute.
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'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.