converting a PDF page to a SVG document works OK with inkscape.
However I noticed that many style elements are heavily duplicated in the output SVG.
I noticed that embedding CSS into SVG seems to be possible using inkscape's UI.
Does anyone know if (and how) this CSS conversion can be called from inkscape's command-line (or through some inkscape API) as well?
Kind regards,
Marius
Related
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: 👍🇦🇹
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for 👍THUMBS UP SIGN Unicode character
SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
In this project:
https://test.restaurantacasa.cat/
I use vectors as restaurants logos. In some of them, I include (embed in the svg) a bit of bitmap, for an example, here:
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
However, if you open that one in Safari (mobile or desktop), you'll notice that the bitmap section is not rendered.
Can you help me understand why?
I produce the vectors with Adobe Illustrator.
Have you tried using <object> to embed your SVGs, instead of <img>? <object> elements don't have the same restrictions on external references that <img> does.
This is a known bug with Safari.*
When you use SVG as an <img>, external files such as embedded images are not loaded (in any browser). To get around this restriction, Illustrator converts embedded images to data URI values, so that all the data for the embedded image is stored in the SVG file.
For most browsers, this is enough. However, Safari treats the data URI value the same as any other URL referencing an external file, and does not process/load it.
* Scroll down the comments on the linked bug report, it took people a while to figure out what the problem was! The main discussion starts around comment 16.
I also had this issue and found a solution which I thought was worth posting here.
I was embedding the SVG as an object:
<object data="path_to_file.svg" />
and the object was including the image as:
<image href="raster.png" />
This worked everywhere except Safari. I found out that the proper syntax to use is this:
<image xlink:href="raster.png" />
Furthermore, if you are javascripting, it's not sufficient to just setAttribute() you need to setAttributeNS() like so:
el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")
Also, be sure to include the xlink NS at the top of the SVG file in the SVG tag:
<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>
(based on info I found here)
Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and I’d rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing — please do tell about them.
3) SVG code backup: pastebin.
Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.
I would like to use SVG and not to have to create a PNG fallback every time. Is the an easy solution to this problem? I have looked at these projects but can't tell whether they support it:
http://sie.sourceforge.jp/
http://code.google.com/p/svgweb/
try GruntIcon - http://github.com/filamentgroup/grunticon
grunticon takes a folder of SVG files (typically, icons that you've
drawn in an application like Adobe Illustrator), and outputs them to
CSS in 3 formats: svg data urls, png data urls, and a third fallback
CSS file with references to regular png images, which are also
automatically generated and placed in a folder.
grunticon also generates a small bit of JavaScript and CSS to drop
into your site, which asynchronously loads the appropriate icon CSS
depending on a browser's capabilities, and a preview HTML file with
that loader script in place.
There's quite a number of SVG polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#svg
Please try them and update your initial question with the results for each.
I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.
Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.
Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?
Thanks for any help.
In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.
Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.
Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.
Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.
I'm also seeking for the same, and here are the pointers I could find:
17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
SVG Stacks (simurai.com)
Can I use SVG fragment identifiers? (caniuse.com)
Better SVG Sprites With Fragment Identifiers (broken-links.com)
According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).