I have made this shape with inkskape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="86.708229mm"
height="108.46725mm"
viewBox="0 0 86.708229 108.46725"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-60.976129,-17.450189)">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.7149655"
inkscape:transform-center-y="0.12577677"
d="M 74.631466,44.717104 62.421924,34.403638 a 2.6778389,2.6778389 90.043215 0 1 0.0031,-4.093976 L 74.671628,19.996493 a 8.6973678,8.6973678 159.95323 0 1 5.603571,-2.044714 l 48.153211,0.0067 a 8.6807368,8.6807368 20.098102 0 1 5.60047,2.049272 l 12.20963,10.313627 a 2.6778292,2.6778292 90.04357 0 1 -0.003,4.093967 l -12.24664,10.313026 a 8.6974755,8.6974755 159.95346 0 1 -5.60359,2.044695 l -48.153211,-0.0067 a 8.680796,8.680796 20.097976 0 1 -5.600483,-2.049262 z"
sodipodi:nodetypes="ccccccc"
inkscape:path-effect="#path-effect427"
inkscape:original-d="M 77.056949,46.765923 59.996441,32.354819 77.100199,17.951336 l 54.503211,0.0076 17.06057,14.411285 -17.10382,14.403302 z"
inkscape:export-filename=".\path424.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>
and the shape is ok But the overall height is so much more that the shape
in this picture I've opened it in browser and as you see the height is 409.95px
that is not desirable
how can I remove the extra height of that ?
just some bela bela to let me post this
just some bela bela to let me post this
just some bela bela to let me post this
Remove the width and the height attributes from <svg> and alter the viewBox so that it matches the size of the content.
In this example I also removed the transform attribute from the <g> and replaced the path itself using the tool SvgPathEditor.
Now the path takes up 100% of the box and the aspect ratio matches the content.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
viewBox="0 0 86 29"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
id="layer1">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 13.2315 26.7653 L 1.0219 16.4518 a 2.6778 2.6778 90.0432 0 1 0.0031 -4.094 L 13.2716 2.0447 a 8.6974 8.6974 159.9532 0 1 5.6036 -2.0447 l 48.1532 0.0067 a 8.6807 8.6807 20.0981 0 1 5.6005 2.0493 l 12.2096 10.3136 a 2.6778 2.6778 90.0436 0 1 -0.003 4.094 l -12.2466 10.313 a 8.6975 8.6975 159.9535 0 1 -5.6036 2.0447 l -48.1532 -0.0067 a 8.6808 8.6808 20.098 0 1 -5.6005 -2.0493 z" />
</g>
</svg>
the attribute width/height in the SVG tag force it to be that many millimeters and thus so many pixels - if you remove the attributes and view the SVG file in a browser it will take up the entire viewport dimensions .. either way the viewBox attribute needs to be precise too, or left out. Depending on your usage you may want to set width/height both to 100% and the viewBox to the SVG size of your drawing - reduce the canvas in your SVG editor (apparently Inkscape) before exporting to its minimal size.
I'm absolutely beginner with SVG, and I need to put text around this moon...
I tried to make text around a path and could not get the right sizes and match it with the moon.
<svg viewBox="-6 -6 30 40">
<defs>
<mask id="earth">
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
<circle fill="black" cx="3.141592654" r="5" />
</mask>
</defs>
<circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-25)"/>
</svg>
Draw the moon with a path. (and edit in: https://yqnn.github.io/svg-path-editor/)
The path is drawn counter-clockwise, if you want to draw the innermoon text like your design, it is easier to add a 2nd path drawn clockwise.
Setting pathLength helps in positioning with startoffset
Look up all attributes you don't know in the docs.
<svg viewBox="0 0 80 60">
<rect width="100%" height="100%" fill="skyblue"/>
<path id="Moon" pathLength="10" d="m16 2a12 12 0 1018 13 1 1 0 01-18-13z"/>
<text>
<textPath href="#Moon"
startoffset="1" text-anchor="left" dominant-baseline="hanging"
fill="blue" font-size="3px">Outside moon</textPath>
</text>
<text>
<textPath href="#Moon"
startoffset="6" text-anchor="right" dominant-baseline="hanging"
fill="rebeccapurple" font-size="4">Inside moon</textPath>
</text>
</svg>
So, if you check the fiddle, (https://jsfiddle.net/xXnikosXx/6jx2rpsf/3/)
I have an SVG image, with a couple of objects, and a mask. It's masking the text (colorful lines) which are hidden below it, and the plan was to animate their top position to make the text from below appear and the text from the top to disappear, to make a text scrolling effect. The text without the mask is shown in the image below, in case it helps.
here
I thought the text would appear when the animation occurs, but it doesnt (if you remove the mask, the text is shown and animated properly but they layers are wrong so the text appears above everything else)
I cant figure out a way to make the text animate properly using the mask, is there something i can use instead of the mask to get the same result, but without the text issue?
relevant code:
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="354" y="174" width="733" height="344">
<rect id="laptop-screen-front" x="354" y="174" width="733" height="344" fill="white" />
</mask>
<g mask="url(#mask0)">
<!-- some of the lines that represent text: -->
<g id="text-lines">
<line id="Line 3" x1="408" y1="194.5" x2="433" y2="194.5" stroke="#E06C60" stroke-width="5" />
<line id="Line 23" x1="438" y1="194.5" x2="463" y2="194.5" stroke="#D18C4C" stroke-width="5" />
<line id="Line 35" x1="469" y1="194.5" x2="542" y2="194.5" stroke="#7BC379" stroke-width="5" />
<line id="Line 36" x1="469" y1="209.5" x2="525" y2="209.5" stroke="#7BC379" stroke-width="5" />
</g>
Your code doesn't animate the mask. It attempts to animate the position of the text-lines g element. But SVG is not HTML. It is its own thing and doesn't support many common CSS properties: e.g. most relevant for you - there is no "top" property in SVG. The easiest way to do what you want is to get rid of all the CSS animations, and add a transform and a SMIL animation directly into the following part of the SVG.
<g mask="url(#mask0)">
<g id="text-lines" transform="translate(0 0)">
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -150; 0 0" dur="11s" repeatCount="indefinite"/>
<line id="Line 3" x1="408" .... etc.
BTW - one of the reasons to use transforms for animation is that browsers can often optimize things by doing the animation on the GPU - so it's better than viewBox or top animations.
2 methods:
with SMIL
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
<animate attributeName="viewBox"
values="0 0 180 20; 0 20 180 20; 0 0 180 20"
begin="1s" dur="2s" repeatCount="indefinite" />
</svg>
</svg>
with javascript - requestAnimationFrame
(function()
{
const
svgInside = document.querySelector('#insideSVG')
, moving = .7 // change the value to slow down or speed up
;
let
stepVal = moving
, stepPos = 0
;
requestAnimationFrame(step)
;
function step()
{
stepPos += stepVal
if (stepPos<=0) stepVal = moving
if (stepPos>=20) stepVal = -moving
svgInside.setAttribute('viewBox',`0 ${stepPos} 180 20`)
requestAnimationFrame(step)
}
}
)()
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20"
id="insideSVG" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
</svg>
</svg>
For your SVG the values should be around:
<svg x="354" y="174" width="733" height="344" viewBox="354 174 733 344" >
<line x1="419" y1="187.5" ..... />
/.../
<animate attributeName="viewBox"
values="354 174 733 344; 354 520 733 344; 354 174 733 344"
begin="1s" dur="8s" repeatCount="indefinite" />
</svg>
how does <animate> work ?
– Paul LeBeau
the mdn documentation is quite complete: :
SVG animation with SMIL
<animate>
do not hesitate to consult the links to additional information pages
but if you want a general vision of the animation possibilities of your SVGs, the Wikipedia page is ideal
There is even a part showing the use of the requestAnimationFrame(), which I am using here.
PS:The Whitesmith style has been around since 1978, and no, I don't use it for aesthetic reasons but because it checks that the right pairs of braces frame the right pieces of code. For the same reasons, I put the commas in front of data lines (they are invisible [and often forgotten] at the end of the line), as well as the column alignment (both in a similar way used in Haskell)
No, the K&R is not a foolproof style, nor is it more legitimate than any other.
My logo on my website is an inline SVG
And it works very well
But for some odd reason, Chrome is treading the SVG as if it has a width of 300px, but Firefox doesn't and shows the SVG correctly
So the result is, when using Chrome it adds a lot of empty space on both sides of the actual SVG content and centers it.
Image can be seen here
And all the HTML, CSS etc. is available here http://codepen.io/peterbrinck/pen/JYNPNp
Here's the SVG
Maybe it's something obvious, and it's just because I don't know enough of SVG yet
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="roboto-svg"
x="0px"
y="0px"
viewBox="0 0 390.03581 103.1359"
enable-background="new 0 0 841.9 595.3"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="robot.svg"><metadata
id="metadata27"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs25" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1855"
inkscape:window-height="1056"
id="namedview23"
showgrid="false"
fit-margin-top="3"
fit-margin-left="3"
fit-margin-right="3"
fit-margin-bottom="3"
inkscape:zoom="1.4142136"
inkscape:cx="-49.249423"
inkscape:cy="172.6809"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
stroke-miterlimit="10"
d="m 45.717895,50.417894 c -9.3,-9.3 -24.3,-9.3 -33.6,0 v 40.6"
id="path9"
inkscape:connector-curvature="0"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="455.10001"
cy="312.70001"
r="23.799999"
id="circle15-7"
sodipodi:cx="455.10001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-365.475,-245.56411)" /><circle
stroke-miterlimit="10"
cx="385.20001"
cy="312.70001"
r="23.799999"
id="circle11"
sodipodi:cx="385.20001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" /><line
stroke-miterlimit="10"
x1="135.81789"
y1="67.217911"
x2="135.81789"
y2="12.1179"
id="line13"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="455.10001"
cy="312.70001"
r="23.799999"
id="circle15"
sodipodi:cx="455.10001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" /><path
stroke-miterlimit="10"
d="m 310.7179,84.017894 c -9.3,9.3 -24.3,9.3 -33.6,0 v -64.9"
id="path17"
inkscape:connector-curvature="0"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><line
stroke-miterlimit="10"
x1="277.11792"
y1="43.417889"
x2="301.11792"
y2="43.417889"
id="line19"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="579.70001"
cy="312.70001"
r="23.799999"
id="circle21"
sodipodi:cx="579.70001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" />
</svg>
I've figured it out
It has something to do with the aspect ratio
When in the SVG, width="100%" is set, Chrome keeps the aspect ratio in a weird way, instead of resizing the whole SVG element, it just resizes the content of the SVG, according to the height that's set with CSS
I have this graphic:
http://jsfiddle.net/6xzvK/
As you can see I have tried to reduce the height and the width of the image changing the width and height attributes inline, but the image doesn't get smaller but actually it is clipped..
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="422.90625" height="379.90625" id="svg9312" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="distancia.svg">
<defs id="defs9314"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="547.89286" inkscape:cy="79.950317" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="true" inkscape:window-width="1280" inkscape:window-height="996" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
<metadata id="metadata9317">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(675.75,-132.40625)">
<path inkscape:connector-curvature="0" style="fill:#cccccc;fill-opacity:1;stroke:#a7a7a7;stroke-width:40;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m -617.67786,152.40969 406.78608,0 c 21.08533,0 38.05866,16.97395 38.05866,38.05836 l 0,363.78878 c 0,21.08442 -16.97333,38.05866 -38.05866,38.05866 l -406.78608,0 c -21.08229,0 -38.05866,-16.97424 -38.05866,-38.05866 l 0,-363.78878 c 0,-21.08441 16.97637,-38.05836 38.05866,-38.05836 z" id="path13632"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -313.87975,305.7941 35.80527,0 0,197.61986 -35.80527,0 z" id="path13634"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -436.01245,241.32064 35.82652,0 0,262.09332 -35.82652,0 z" id="path13636"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -556.61758,305.7941 35.80526,0 0,197.61986 -35.80526,0 z" id="path13638"/>
</g>
</svg>
Give the root <svg> element a viewBox attribute and it will scale rather than clip.
Something like this may work for you viewBox="0 0 800 400" but you might want to use the original width/height before you adjusted things.