How to merge two svg flile - svg
I have two files(svg) from get font-awesome
1 Icon search
https://fontawesome.com/icons/search?style=solid
2 Icon desktop
https://fontawesome.com/icons/desktop?style=solid
I would like to get finish result like
I'm sorry, I can't use Adobe Illustrator
Thank you in advance your diligence
Im putting both paths (the computer #cp and the magnifying glass) in the same svg element. Please note that the magnifying glass is a symbol and has it's own viewBox attribute. This will allow me to resize it and position it as needed by using a <use> element with a position (x, y) and a size (width):
<use xlink:href="#mg" fill="red" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
I hope you'll find this useful:
<svg viewBox="0 0 700 540" >
<defs>
<symbol viewBox="-20 0 500 438" id="mg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022
c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913
c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031
c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144
c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743
c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z
M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212
c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436
C115.029,286.791,67.692,235.734,68.576,177.429z"/>
</symbol>
</defs>
<g id="cp">
<path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09
c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033
c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067
c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695
c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657
c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76
c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476
c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012
c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178
c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501
c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z
M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096
c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604
c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476
c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/>
</g>
<use xlink:href="#mg" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
</svg>
Related
How to make SVG stroke-width consistent across the entire path?
Here is an example: <svg width="60" height="30"> <path stroke="red" stroke-width="1" fill="none" d="M0 25 L10 25 L45 5 L55 5"/> </svg> I find that the inclined line segment has a thinner stroke-width then the horizontal lines. How do I make the stroke-width consistent across the entire path? Breaking the path into multiple paths did not help as the line joins are not elegant. The points are generated dynamically so the solution needs to be generic.
<svg width="180" height="120"> <g stroke="red" fill="none"> <g stroke-width="1"> <path id="p" d="M0 25l10 0l35-20l10 0" /> <use href="#p" y="25" shape-rendering="optimizeQuality"/> <use href="#p" y="50" shape-rendering="crispEdges"/> </g> <use href="#p" stroke-width="2" x="60"/> <use href="#p" stroke-width="3" x="120"/> </g> </svg> I added stroke-width 2 and 3 to your example. The effect is less because more pixels are being used to draw the line. At 1 pixel your monitor and Browser can't make much of it. Only add (some) anti-aliasing. screenshot zoomed: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering won't help because it is still your monitor/browser only having 1 pixel to draw that line Same for CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering.. it is still 1 pixel Same for setting style="transform:translateZ(0)" Maybe in the future with Quantum Dot display technology it will look better. https://en.wikipedia.org/wiki/Next_generation_of_display_technology
SVG feImage filter clips stroke - how to stop that?
I'm trying to create a filter for only the stroke of path in SVG, but the feImage keeps getting clipped to what I assume is that bounding box (see green rectangle below in code as bounding box). I've tried setting the filter's x/y and width/height to all sorts of positions/sizes, as seems to be the prevailing advice, but nothing works. x/y just offset the feImage and width/height of greater than 100% has no effect. I won't know in advance if the stroke or fill is solid or something else (like linearGradient. The below demonstrates what I'm looking to do - just get the stroke of a shape (regardless of size or fill) and apply a filter to it for all modern browsers. Notes: FF doesn't even display the left-hand feImage. Chrome clips the left and top. Edge clips all 4 sides. <html> <body> <svg width="960" height="540" > <rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3"/> <svg name="BoundingBox1" class="rect" x="100" y="100" overflow="visible" fill="none" stroke="#00ff00" stroke-width="1"> <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" /> </svg> <!-- BELOW IS MODIFIED "SPEECH" SHAPE. NEED A FILTER ON THE STROKE ONLY. --> <svg name="Speech-strokeonly" x="100" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="strokeOnly" fill="none"/> <filter id="effs0sp9" color-interpolation-filters="sRGB" x="0" y="0"> <feImage xlink:href="#strokeOnly" /> </filter> </defs> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" filter="url(#effs0sp9)" overflow="visible" /> <text y="160" stroke="black" stroke-width="0.2">this is the one that has undesirable clipping of</text> <text y="178" stroke="black" stroke-width="0.2">of stroke in Chrome/Edge. Doesn't appear at all in FF</text> </svg> <!-- BELOW IS ORIGINAL WITH BOTH FILL AND STROKE --> <svg name="BoundingBox2" x="400" y="100" overflow="visible" fill="none" stroke="green" stroke-width="1"> <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" /> </svg> <svg name="Speech-original" x="400" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12"> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" /> <text y="-22" stroke="black" stroke-width="0.2">this is the original one</text> <text y="-6" stroke="black" stroke-width="0.2">that I just want the stroke as feImage from</text> </svg> </svg> </body> </html> Is there a way to grab the whole stroke of a shape only and use in a filter?
svg draw circle with curved text inside
I need to draw red cirle with two curved string inside like that: upper string always be 3 chars length lower string can be from 1 to 20 chars length UPDATE1: I try to use textpath and circle tags, but I think I need to change some coordinates: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/> <defs> <path id="myTextPath" d="M75,20 a1,1 0 0,0 150,0" /> </defs> <text x="5" y="50" style="stroke: #000000;"> <textPath xlink:href="#myTextPath" > string </textPath> </text> </svg> Also I didnt clear understand <path> 'd' atrribute , but I found out that I can change starting point to M10,20 but how I can change text curve orientation? d="M10,20 a1,1 0 0,0 150,0"
To have text that "hangs" from a line nicely, the best way right now is to use a path with a smaller radius. There is an attribute to adjust the text's baseline, but that doesn't work reliably. So you need two arcs. One for the bottom half of the circle, and one with a smaller radius for the top half. They also need to both start from the left. That means one will go clockwise, and the other will go anti-clockwise. You control that with the arc command's "sweep" flag. We need to also use startOffset="50%" and text-anchor="middle" to centre the text on the paths. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"> <defs> <path id="tophalf" d="M26,40 a14,14 0 0,1 28,0" /> <path id="lowerhalf" d="M16,40 a24,24 0 0,0 48,0" /> </defs> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/> <path d="M16,40 a24,24 0 0,0 48,0" style="stroke:#600; fill:none"/> <text x="5" y="50" style="stroke: #000000;" text-anchor="middle"> <textPath xlink:href="#tophalf" startOffset="50%">str</textPath> </text> <text x="5" y="50" style="stroke: #000000;" text-anchor="middle"> <textPath xlink:href="#lowerhalf" startOffset="50%">second st</textPath> </text> </svg> This works fine in FF, but unfortunately, it seems there are bugs in Chrome and IE right now that is causing the text to not be centred properly on those browsers.
Grouping several SVG's into one object
I'm trying to reuse an SVG sprite icone into new SVG object. The new object is just a circle that contains the icon from the sprite. I understand that I need to use the defs tag to group some shapes together, But i have have a problem referencing my sprite icone inside the defs tag. sprite: <svg style="display:none;"> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol > new object: <svg><defs> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <image x="0" y="0" xlink:href="#icon_1"></image> </g> I read that i can use image tags to reference SVG elements. obviously i'm doing something wrong. Basically the expected result should be a stroked circle with the icon inside in a way that I will be able to animate the entire object Thanks
You were close. Your main problem was that you were careless with your opening and closing tags. Your second SVG had a stray opening <defs> element, which meant that the <g id="shape"> element was left inside the <defs> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere. There were a couple of other problems. You can't use an <image> to reference a symbol. You will need to use a <use> for that. You will need to supply a width and height so that the symbol gets draw at an appropriate size. <svg width="0" height="0"> <defs> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol> </defs> </svg> new object: <svg> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <use x="0" y="0" width="80" height="80" xlink:href="#icon_1"></use> </g> </svg>
The image tag is designed to be used with complete images, not fractions. I guess that use is the right tag for your use case. <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol> <defs> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/> </g> </defs> <use xlink:href="#shape"/> </svg> Also, if the sprite is in a separate file, you have to reference the symbol within that file: <use hlink:href="sprites.svg#icon1"/>.
SVG clipPath to clip the *outer* content out
Normally, the <clipPath> element hides everything that is outside the clip path. To achieve the opposite effect - that is to "cut out" something from the image - i want to use two paths in the clipPath and the clip-rule="evenodd" attribute. Basically, I want to "xor" the clip paths. But it doesn't work. It shows the region "ORed": <clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox"> <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" /> <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" /> </clipPath> <rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/> EDIT: My problem is that AFAIK <mask> doesn't work in iOS WebKit.
It's much easier to do what you're after with a mask, see this example. Here's the mask definition: <mask id="maskedtext"> <circle cx="50%" cy="50%" r="50" fill="white"/> <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text> </mask> Regions that are white inside the mask will be kept, everything else will be clipped away. Here's another example that uses clipPath instead, is a bit trickier since you need to use a path element to get the clip-rule to apply. The clipPath that uses clip-rule there looks like this: <clipPath id="clipPath1"> <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/> </clipPath>