How to make the pattern of svg editable in Adobe Illustrator? - svg

Here is an svg filled with <pattern>.
<svg width="600" height="180">
<defs>
<pattern id="carrot" patternUnits="userSpaceOnUse" width="50" height="50">
<path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="lightgreen"/>
<rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>
I try to edit this svg in Adobe Illustrator, but I find the pattern cannot be edited.
When I scale this svg, the size of icons will not change. When I move the svg, the pattern will not move. I can change the color of the background rectangle, but I can't change the pattern's color.
Current svg:
I want to treat the pattern as part of the svg and editable in Adobe Illustrator. For example, when I scale the svg, the icons of the pattern will scale equally. I can change one of the icon's color.
Expected svg:
Do you know if creating an svg like this is possible using code?
Update: I tried patternUnits="objectBoundingBox"
<svg width="600" height="180">
<defs>
<pattern id="carrot" patternUnits="objectBoundingBox" width="0.1" height="0.3">
<path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="lightgreen"/>
<rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>
When I open the objectBoundingBox svg in the Adobe Illustrator, there is only background but no pattern.
When I set patternContentUnits="objectBoundingBox", the pattern still cannot be edited.
<svg width="600" height="180">
<defs>
<pattern id="carrot" patternContentUnits="objectBoundingBox" width="0.2" height="0.3">
<path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8" transform="scale(0.005)"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="lightgreen"/>
<rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>


If you want to transform a pattern in Illustrator you have to turn on the option: Transform both (or Transform Pattertn Only) in the palette 'Transform':
If you're using scripts to run Illustrator for this task I believe this preference can be toggled via a script. Let me know if you need help.

Related

How to make stroke-width scale with svg width but not with height?

I need strokes to scale with width but not with height.
This is the closest I've come to a solution:
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="50">
<rect width="100%" height="100%" fill="black"/>
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" stroke-width="5" stroke="blue" d="
M 0,0 L 1,1
M 0,1 L 1,0
"/>
</svg>
</svg>
This lets me change the height without affecting the stroke width, but also I need the strokes to scale when the entire svg is scaled. The problem is that I can't make the strokes scalable again. I've tried using percentages, but they are relative to the diagonal size.

SVG fill not coloring the background

I have an svg and when I define the fill it behaves as stroke
For example
<svg stroke="black" fill="red">
<path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>
This works as expected, but when I have
<svg stroke="black" fill="red">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
It doesn't. Any suggestions why the fill doesn't work as the other svg ?
DEMO
<svg stroke="black" fill="red">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
<svg stroke="black" fill="red">
<path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>

If we enlarge the arrow, you will see what is happening.
<svg viewBox="0 0 40 40"
stroke="black" fill="red" stroke-width="0.2">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
As Robert said, you have an arrow shape with an arrow shaped hole inside it. Your arrow was appearing black, instead of red, because at that small size the thickness of the black stroke was hiding the red fill.
If you want a red arrow with a black outline, then you will need to redesign your shape so that it is just a single outline, not a "double-walled" one.

SVG letter R for eyechart

Folks, let me start by saying that StackOverflow has been invaluable help in my project to design an open-source javascript eye-testing chart. Thank you all.
My question is how best to draw a capital letter R in a 5 high by 4 wide grid, that will work at 0.1 alpha (so no overlapping elements allowed).
Here's my best attempt so far. The difficulty is in the meeting between the arc and the diagonal, which is not a straight line.
<svg id="Snellen_R" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1" >
</path>
<polygon points="1.4,3 2.1,3 2.2,2.99 2.3,2.98 2.35,2.97 2.4,2.96 2.45,2.95 2.5,2.94 4,5 2.8,5" fill="black" />
</svg>
Thanks.

Inkscape may be able to help you. It's an open source vector graphics editor. I've used it several times for creating text graphics. If anything you can use Inkscape to draw your letter, and then look at the code it generates. You can also save your graphic to a .svg file, or export to another format such as .png.
Here is the link:
https://inkscape.org/en/
Plenty of youtube tutorials out there as well. Good luck!

There's actually no problem having elements overlapping. Just apply the opacity setting to the whole <svg> element instead of setting separate fill-opacity and stroke-opacity values for the drawing elements inside it.
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1" stroke-opacity="0.1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" fill-opacity="0.1" />
</svg>
<br/>Opacity applied to <tt><path></tt> and <tt><polygon></tt> elements</p>
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm; opacity:0.1">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" />
</svg>
<br/>Opacity applied to <tt><svg></tt> element</p>

How does SVG opacity stack?

I'm wondering, how do SVG elements stack their opacity? More specifically, if I have an element with opacity: 0.4, what will the overlapping element's opacity need to be in order to result in opacity: 0.8 at the overlap?
What is the resulting opacity at the overlap?
https://jsfiddle.net/HZr7v/18/

The answer is 0.6667.
The rule is that transparency combines by multiplication. So if you have two overlapping objects with transparencies of 60% and 33.33%, then the transparency of the overlapping region will be (0.6 × 0.3333) = 0.2.
An object's alpha value is equal to 1 minus its transparency, so the combination of α=0.4 and α=0.6667 is equal to 1 - (1-0.4) × (1-0.6667) = 1 - 0.6 × 0.3333 = 1 - 0.2 = 0.8.
By way of illustration, here's an SVG image containing two overlapping circles with alpha values of 0.4 and 0.6667 next to a solid circle filled with 80% black (#333):
<svg width="340" height="200" viewBox="0 0 340 200">
<circle cx="100" cy="80" r="60" fill="#000" opacity="0.4" />
<circle cx="100" cy="120" r="60" fill="#000" opacity="0.6667" />
<circle cx="180" cy="100" r="60" fill="#333" opacity="1" />
<text x="0" y="30">α=0.4</text>
<text x="0" y="180">α=0.6667</text>
<text x="250" y="110">80% black</text>
</svg>

How to find svg rectangle Absolute positioning while moving from one location to another

Default rectangle position is (100,200) when it moved, how to get the absolute positioning based on SVG width and height.
Below code is giving relative path. When I move towards left/up it giving -ve values.
<svg width="600" height="600">
<!-- code -->
<rect class="draggable" x="100" y="200" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>
</svg>

Finally, I found this way.
<svg width="600" height="600">
<!-- code -->
<rect class="draggable" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>
</svg>
In the above code I removed the x and y positions so that it's completely dependent on transform matrix e,f absolute positions.

Resources