Is there a way pass some data to a svg file when it's being used as background image. For example with something like this:
background-image:url("mysvg.svg?myparam=red")
and in mysvg.svg receive red from myparam parameter?
I've seen Parameter Variables in SVG but it seems require use of <object> in html, so just adding into svg
<defs>
<ref id="myparam" param="myparam" default="blue"/>
</defs>
<rect x="5" y="5" width="100" height="30" rx="15" ry="15" fill="url(#myparam)" />
doesn't work and I'm trying to avoid use any kind of inline-html inside CSS if all possible.
Related
I use Inkscape to edit existing SVG files like this one (simplified, for readability purposes):
<svg>
<style type="text/css">
.st0{fill:#AFAA96;stroke:#AFAA96;stroke-miterlimit:10;}
.st1{fill:none;stroke:#738282;stroke-width:16;stroke-miterlimit:10;}
</style>
<rect x="0.5" y="0.5" class="st0" width="99" height="99"/>
<path class="st1" d="M10 10"/>
</svg>
As you can see, there are 2 css classes "st0" and "st1", applied to a <rect> and a <path>
I don't want the SVG to contain CSS classes.
I need that every SVG element contains all the corresponding styles of the associated class.
Is there a way, using Inkscape, to transform (automatically) the previous SVG into this ?
<svg>
<rect x="0.5" y="0.5" width="99" height="99" fill="#AFAA96" stroke="#AFAA96" stroke-miterlimit="10"/>
<path fill="none" stroke="#738282" stroke-width="16" stroke-miterlimit="10" d="M10 10"/>
</svg>
Thankyou in advance :)
Current solution inside inkscape:
select all
cut
paste (now all objs will get direct styling)
remove linked CSS styles from selected objects in CSS dialog
when all objects unlinked from any styles, you can remove empty styles.
Basic needs:
I am working on a Qt application that replaces colors in an svg.
A nice implementation is to parse the svg xml, and replace the colors as found with a good color match.
Unfortunately, the application must run on a platform with very limited speed and memory, and loading the svg into the QSvgRenderer from an xml (or text string) is extremely slow.
So - my current implementation is to string replace the occurrences of hex known colors in the QByteArray loaded by the renderer.
A big limitation - if I want to replace a fill color with a pen color, and they match, I end up with a broken blob.
A second limitation: I can only have 2 defined colors, a fill and a pen.
What I would like:
I want to be able to create a "parameterized" svg, where I can replace "color1", "color2", "color3" defined at the top, with whatever colors the user chooses.
Note - the svg has to be loaded by the QSvgRenderer, so the parameter values can't be in an outside html or js.
The svg must be self-contained... with no outside caller requirement.
But I can replace in code the parameter value before load.
I just want to be able to replace parameters in a single location, instead of actual values inside the xml everywhere they occur.
What I have tried:
I have read in the svg documentation that it is possible to create parameterized values. This is from an example, as much as I understand it...
w3.org example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 40" width="100%" height="100%">
<title>Reusable Button</title>
<desc>Takes parameters from parent document's embedding element.</desc>
<defs>
<ref id="paramFill" param="color" default="blue"/>
<ref id="paramText" param="text-label">button</ref>
<ref id="paramStroke" param="outline" default="navy"/>
</defs>
<g>
<rect id="button_rect" x="5" y="5" width="100" height="30" rx="15" ry="15" fill="url(#paramFill)" stroke="url(#paramStroke)" />
<text id="button_label" x="55" y="30" text-anchor="middle" font-size="25" fill="black" font-family="Verdana">
<tref xlink:href="#paramText" />
</text>
</g>
</svg>
Unfortunately Qt doesn't load it and browsers show as error.
Second example: from S.O: Define color in SVG
<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<style>
.myfill { fill:red }
</style>
<g fill="blue">
<rect x="0" y="0" width="704" height="702" class="myfill" />
</g>
</svg>
This loads in browser correctly as red, but Qt loads it with blue - so clearly it does not support the parameter value.
Is there any possible version of svg that uses parameters, that can be supported by Qt ?
Can somebody please help fix either of my examples or give a correct / better example ?
Thank you.
Qt version: 4.8
A long, long time ago, when some SVG renderers did not support style sheets, I solved this with XML entities:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY red "#ff0000">
]>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<g fill="blue">
<rect x="0" y="0" width="704" height="702" fill="&red;" />
</g>
</svg>
What I am trying to do is to scale my svg path with CSS by just setting the height+width of the whole svg as well as making use of the CSS property transform on the svg's <g> tag.
In the first place everything looked kinda simple and logical, because I'm just having a pattern with a single reference to my patter image -which should be repeated as many times to fill my whole shape. I need more or less the same effect of the CSS property background-repeat: repeat; within my shape.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="Pattern" x="0" y="0" width="149" height="151" patternUnits="userSpaceOnUse">
<image xlink:href="bg.jpg" x="0" y="0" width="149" height="151" />
</pattern>
</defs>
<g>
<path fill="url(#Pattern)" d="M15.83,262c1.531-1.814,2.579-3.021,5.029-5.861c22.052-25.553,84.151-110.104,94.935-122.23
C88.973,92.133,48.727,34.085,32.509,16.395C26.863,9.311,16.216,4.047,6.333,4.047h86.315c-11.26,0-11.265,13.729-2.829,26.479
l49.855,76.479l19.734-25.592l8.506-11.031c0,0-0.006,14.736-0.006,34.438c-0.701,0.935-7.822,10.457-8.519,11.315
c-2.872,3.544-5.229,6.468-6.915,8.573c5.24,7.763,10.384,15.356,15.486,22.813c-0.053,34.541-0.031,68.4-0.031,68.4
l-40.155-64.326c-8.353,12.002-51.124,69.823-68.554,93.937c-2.54,3.515-7.209,10.228-7.438,10.567
c-1.626,2.441-2.108,3.094-3.922,5.899L15.83,262L15.83,262z"/>
</g>
</svg>
SVG patterns (and filters) don't work like CSS's background-repeat, so what you want to do is not possible using SVG. You can't have an implicitly sized viewBox and SVG element AND have fixed size pattern elements: pattern elements will be sized in viewBox units by default.
That said, there are hacky ways to get what you want to do if you're not doing something complex. For example, you can set background-repeat: repeat on the entire SVG element, and then use a filter to paint over the area outside your shape so it looks like its filled. But yeeesh...
I have easily made a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) for browsers like chrome. But i am having serious issues getting the mask to show in Firefox using SVG
<svg>
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78px" height="78px" xlink:href="images/mask.png"/>
</mask>
</defs>
<foreignObject width="78px" height="78px" style="mask: url(#mask);">
<img src="images/avatar-sample.jpg" />
</foreignObject>
</svg>
I really cannot see why this isn't working!
According to http://www.w3.org/TR/SVG/propidx.html you can apply a mask to container elements and graphics elements. Unfortunately <foreignObject> is in neither of these lists so the correct rendering for that element is to ignore the mask property. IE and Firefox are therefore correct in their rendering of this example.
Because IE does not understand the "foreign" object, you have to work around it with javascript and check if you can support it, if so inject it in, and if not avoid it. then you have to use IE's built in color filters to create your own chromakey effect specifically for IE. this site below shows you how to do it with examples.
http://thenittygritty.co/css-masking
You could rewrite your svg like this to make it work in all svg-supporting browsers:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78" height="78" xlink:href="images/mask.png"/>
</mask>
</defs>
<image xlink:href="images/avatar-sample.jpg" width="78" height="78"/>
</svg>
I'm just starting on svg and trying to figure out the limitations of styling.
I have an svg text element in svg. Some of my text elements are tagged with data-editable="true".
I would like for users to be able to easily see what the tagged elements are. I'm imagining a simple, toggleable, translucent overlay.
When I hover over the element in the DOM view in chrome the text element is rendered with a blue-ish overlay. I would like to get a similar effect or something that is somewhat close.
I'd prefer using css if that is possible but any way of achieving that effect would be good. Worst comes to worst I can hack something with inserting rect elements using d3 and jquery but that seems quite messy.
Building on top of an answer by Erik Dahlström
<svg width="100%" height="100%" viewBox="0 0 500 140" preserveAspectRatio="xMidYMid meet">
<style type="text/css">
*[data-editable=true]:hover{ filter:url(#highlight) }
</style>
<filter x="0" y="0" width="1" height="1" id="highlight">
<feFlood flood-color="rgba(100,200,0,.5)"/>
<feComposite in="SourceGraphic"/>
</filter>
<text data-editable="true" y="100" font-size="100">test</text>
</svg>
This works with plain CSS and a filter definition.