I have an SVG that contains this line:
<text transform="translate(-50%,-50%)" text-anchor="middle" class="st11 st13" x="389" y="440" font-family="Roboto Condensed" style="fill: #ffffff">
99
</text>
In Chrome I get this error but it seems to be fine on Safari
Error: attribute transform: Expected ')', "translate(-50%,-50%)".
In SVG 1.1 transform values must be numbers i.e. no units are allowed.
In SVG 2 transforms are supposed to be CSS properties with extra rules to preserve backwards compatibility for the unitless SVG 1.1 case.
Perhaps Safari has implemented SVG 2 transforms, whereas Chrome has not yet done so. SVG 2 is a work in progress for all browsers. The most cross-browser way of doing things would be to omit units or use an alternative way of producing a percentage transform if you need it.
Related
I would like to be able to specify some kind of transformation that would, given an arbitrary SVG node remap all of its pixel values to cover the full (0-100% or 0-255) range of intensities while avoiding clipping.
The feComponentTransfer filter with feFuncX linear mapping functions almost offers what I want but seems to lack the ability to refer to the global maximum intensity of the input node, is there some clever way around it ?
There is no "auto-brighten" feature that will do what you want.
You would have have to do it yourself by reading all the colours yourself with javascript and work out the appropriate brighten/saturate value.
But as a good-enough approach, a saturate filter with a value of 200% might get something close to what you want.
svg rect:hover {
filter: saturate(200%);
}
<svg>
<rect width="50%" height="100%" fill="cadetblue"/>
<rect x="50%" width="50%" height="100%" fill="cornsilk"/>
</svg>
In Inkscape 1.1, I'm not seeing an option to save to a strictly SVG v1.1 formatted file. I've seen screenshots of past versions that had a checkbox for this option. In renderers using batik 1.14, such as Apache FOP, Batik Squiggle, and OxygenXML, I'm seeing errors of the nature:
(1) The attribute "fill" represents an invalid CSS value
("context-stroke"). Original message: The "context-stroke" identifier
is not a valid value for the "fill" property.
(2) SVG Error: For input string: "auto-start-reverse"
From source such as:
<marker id="marker16573" orient="auto-start-reverse" refX="5" refY="3">
<path d="m10 3-10 3v-6z" fill="context-stroke" stroke="#000"/>
</marker>
The auto-start-reverse option for the orient attribute wasn't added until SVG 1.2.
So how can I get a strict SVG 1.1 output from Inkscape. I've tried the Plain and Optimized SVG formats and they still include these attributes.
I also see errors about aria-labels in other instances depending on which SVG Optimizer I try.
Is there a reliable tool to generate a strict SVG 1.1 file from a 1.2 file?
In the preferences, enable the option to 'Use correct marker direction in SVG 1.1 renderers' (and potentially the one for the color, too).
(just type 'marker' into the search field to find it)
When saving, enable the option to export in SVG 1.1 format.
I have this piece of SVG picture:
<text
xml:space="preserve"
style="font-size:18px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;
font-family:'Arial;Sans';
-inkscape-font-specification:'Arial;Sans';font-stretch:normal;font-variant:normal"
x="11.764346"
y="192.01521"
id="text3607"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3609"
x="11.764346"
y="192.01521">PCI-E</tspan></text>
which I edited on linux using inkscape. It used font "sans" which is not available on windows. I would like to specify a font-family that contains fonts available on all major operating systems, but whatever syntax I use it doesn't work. So far I tried:
font-family:'Arial' - works on windows
font-family:'Sans' - works on linux
font-family:'Sans,Arial' - broken
font-family:'Sans;Arial' - broken
What is correct syntax for this to work? I was rendering the picture in IE and Firefox, both seems to have same problems.
in order to change font-family in svg you should first import font in defs in svg like this:
<defs>
<style type="text/css">#import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower');</style>
</defs>
then you can change font-family either using an inline style or by javascript
<text xmlns="http://www.w3.org/2000/svg" style="direction:rtl ;font-family:Gamja Flower" id="nametxt" class="text" transform="matrix(1 0 0 1 390 88.44)">text</text>
and for javascript:
svgTextNode.style.fontFamily=FontFamily
It seems that problem was I had it wrapped in quotes. Correct syntax (or at least it works to me):
font-family:Sans,Arial; (no quotes)
In case if we need to declare global style we could use the following syntax:
<svg width="100" height="100"
xmlns="http://www.w3.org/2000/svg">
<style>
text {
font-family:Roboto-Regular,Roboto;
}
</style>
...
</svg>
For security reason, embedded svg images have to be standalone images. You will need to make the svg 'standalone' by embedding all external assets (in our case is the font definition) into it.
To embedded the font inside svg file, follow these steps:
1. Generate the embedded font url as base64
Download the font file you want to use under .ttf extension.
We will need to have the embedded as data URI scheme.
Upload this font file to any online Data URI converter,
I'm using dopiaza.org data URI generator for simplicity (or you can use any File to Base64 converter tool, as long as you follow the same data-uri generated pattern).
Upload the font file to the converter. Ensure Use base64 encoding is checked. Since we're embedding font, so choose Explicitly specify mime type
and put the mime type is application/font-woff
Hit the Generate Data URI and let the tool do the job, it should present you the following data URI format:
data:<mime-type>;base64,<the_encoded_font_as_base64_content>
In our case using font as Mime-Type, it will be:
data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....
2. Declare the embedded font inside our SVG file
Edit our SVG file that's using the font. Declare #font-face inside the tag. Put the generated data-uri URL above in the src: url("<generated_data_uri>")
<svg>
<defs>
<style>
#font-face {
font-family: Inter;
src: url("data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....")
}
</style>
</defs>
<!-- The rest of your SVG content goes here -->
</svg>
In my case I was converting an SVG as a base64.
Using font-family="Arial, sans-serif;" was not working, but when I removed ";" semi-colon from last portion, voila! it worked.
Unsure what's going on with my SVG icons since updating to the latest Chrome. They still appear to display correctly in Safari and Firefox the only other browsers that I am supporting. Was working perfectly in prior versions of Chrome I've been testing with.
Appears that there are two or more path elements inside the clipPath element in the examples where the icons are not rendering as expected. According to: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath I can place any number of allowed elements inside the clipPath so I believe that I am doing this right... so lost as to why it suddenly has broken down on me.
So basically if you look at the images you will see the kill cockroaches and the eye ball look different than expected on the left to how they are now rendering on the right hand side...
http://codepen.io/dapinitial/pen/Kflpv
<svg>
<defs>
<clipPath id="diff-path">
<path d="M17.19,7.349 C18.753,7.349 20.019,8.626 20.019,10.202 C20.019,11.777 18.752,13.056 17.19,13.056 C15.628,13.056 14.361,11.778 14.361,10.202 C14.361,8.625 15.627,7.349 17.19,7.349 L17.19,7.349 L17.19,7.349 Z" />
<path d="M0.19,10.201 C0.19,10.201 6.833,20.152 17.19,20.152 C27.547,20.152 34.19,10.201 34.19,10.201 C34.19,10.201 27.414,0.249 17.19,0.249 C6.966,0.249 0.19,10.201 0.19,10.201 L0.19,10.201 Z M10.125,10.201 C10.125,6.269 13.288,3.082 17.19,3.082 C21.091,3.082 24.254,6.269 24.254,10.201 C24.254,14.132 21.091,17.32 17.19,17.32 C13.288,17.32 10.125,14.132 10.125,10.201 L10.125,10.201 Z"></path>
</clipPath>
</defs>
</svg>
You need to specify a different "clip-rule" attribute for your clip-path. If I add clip-rule="evenodd" to your clip-path element it fixes things.
I created a star using Illustrator which I saved as an SVG file. Later in my HTML coding I called that SVG like this:
<object type="image/svg+xml" data="images/star.svg" width="100%" height="100%"></object>
But I am unable to see the image in any browsers. I have tried Safari version 5.0 and Firefox 5.0 versions to preview my html.
Is it possible to get an SVG file to display in a browser?
Yes, it is possible. You can use the object tag, or you can use CSS background-image, or with recent browsers you can embed it directly inline using the<svg> tag. Read this:
http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
The SVG file format was originally designed for browsers if i am not wrong.
One crude solution to your problem is by using this pre-made SVG sample code:
<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path id="svg_7" d="m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"/>
</g>
</svg>
Now open up the SVG file you created in Illustrator with Notepad and find something called the ''d'' attribute. Copy the values of the ''d'' attribute. For example in the sample code above you would be copying this: "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59". Take extra care to include the "" tags while copying.
Now create a new Notepad file and paste the sample code i gave you above. Then replace the ''d'' value with the value you copied from your Illustrator SVG file. Make sure you set this values in the sample code with the ones you prefer. **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**.
Also make sure you change the width="500" and height="400" values with ones that correspond to the paper size you are using in Illustrator.
Then save the file with an .svg extension at the end of the filename and choose to save as type ''All Files'' instead of ''Text Document''.
Pretty crude solution but i think illustrator creates SVG files that are not exactly browser friendly.