SHAPE
I need to generate this shape (the one within the black square) only with css and html. I've tried with border-radius but Im not able to generate it with that curvature. Researching a little bit I've found that it's possible to draw a shape like that using svgs and paths but Im not sure if that's the way to go, if so, is there any easy tool to create such svg? Thank you in advance.
Here's the codesandbox where i've been trying to generate the shape using border-radius: https://codesandbox.io/s/practical-hermann-n5zxm2?file=/package.json
This can be accomplished via SVG quite easily if youd like. You can use some cool webapps online to help you design the path or you can create one yourself by hand
Below I have created a basic HMTL page that displays an SVG file. I have also created the SVG file that gives the rough shape your looking for
index.html
<!doctype html
<html>
<head>
<title>svg</title>
<link rel ="stylesheet" href="styles.css">
</head>
<div id="root">
<p>Text</p>
<img src="image.svg" alt="AnSvgHere">
</div>
<script src="scripts.js"></script>
</html>
image.svg
<svg width="256" height="256" viewbox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path fill="none"
stroke="red"
d="M 20 10
L 50 10
C 75 15, 75 25, 100 30
L 120 30
C 130 35 130 35 130 40
L 130 90
C 130 100 130 100 120 100
L 20 100
C 10 100 10 100 10 90
L 10 20
C 10 10 10 10 20 10" />
</svg>
These create the following image
SVG is a versatile tool that can be used for drawing complex shapes and paths. you can find more information about SVGs and more speciffically the d attribute in the path element here Link to Docs on Path element
Related
I am trying to create an SVG image logo with simple graphic and only a couple of words of company name using non-standard font. To conserve the size I decided to embed only glyph's that needed for the words, instead of referring to the entire font. But the text is not shown using the custom (embedded) font. So I found a very similar example on the "most important website" - W3.org and to my surprise their example also doesn't work in most modern browsers.
Here's the link to the official SVG definition article with the example:
https://www.w3.org/TR/SVGTiny12/fonts.html
And here's the link to the SVG example file in question:
https://www.w3.org/TR/SVGTiny12/examples/font01.svg
Here's the code from the file:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" viewBox="0 0 160 70"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Font example</title>
<defs>
<font horiz-adv-x="313" xml:id="la">
<metadata>Converted from Larabie Anglepoise by Batik ttf2svg
See http://www.larabiefonts.com/ </metadata>
<font-face font-family="larabie-anglepoise" units-per-em="1000"
panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/>
<missing-glyph horiz-adv-x="500" d="M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
<glyph unicode="S" glyph-name="S" horiz-adv-x="385" d="M371 1H29V144H264Q264 151
264 166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29
329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352
309Q371 273 371 221V1Z"/>
<glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0
563H101L183 296L270 563H365Z"/>
<glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355
1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
<hkern g1="V" g2="G" k="-40"/>
</font>
</defs>
<text x="40" y="50" font-family="larabie-anglepoise" font-size="70"
fill="#933">SVG</text>
<rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/>
</svg>
It doesn't work, meaning the image is rendered, but with the wrong font, in:
Chrome v. 55.0.2883.87
Firefox v. 47.0.2
Internet Explorer v. 10.0.9200
Opera v. 42.0
Vivaldi v. 1.2.490.43
However the sample image renders properly in older browsers:
Opera v. 12.17
Safari v. 5.1.4
Maxthon v. 4.4.5.3000
What's going on? Please advice how can I reliably create SVG image with embedded font, without referring to the external files using CSS.
Firefox has never supported SVG fonts because they are not suitable for many of the world's scripts such as devanagari.
IE has never supported SVG fonts because they don't have widespread browser support.
Chrome dropped support for SVG fonts due to lack of use and the above two reasons.
Opera moved from its own rendering engine to using Chrome's Blink rendering engine after version 12 thereby falling under rule 3.
Vivaldi also uses Blink as a rendering engine
Maxthon uses Safari/Webkit as a rendering engine.
No major browser does or will support SVG fonts and the SVG 2 specification has dropped them as a requirement. Other alternatives such as SVG glyphs in OpenType are being worked on.
You can embed the non-SVG font as a data URI to have it work in an image.
I am trying to color a part of a svg-file by css and that doesn't seem to work.
This is the svgs' code:
<svg xmlns="http://www.w3.org/2000/svg" data-name="logo" viewBox="0 0 87.6 128.2"><title> sw17_rebrand_logo</title><path class="logo_top" d="M15.6 86.9C-1.8 71-6.4 37.2 16 14.9S72-2.5 87.6 14.7Z"/><path class="logo_bottom" d="M72.3 41.2c20.2 19.2 19.5 53.7-1.5 73.2-22.5 21-55.4 16-70.9-1.1Z"/></svg>
And that's the css
.logo_top{
fill:blue;
}
The html looks like that
<img class="logo_img" src="images/sw17_rebrand-logo.svg"/>
But that doesn't do nothing. I don't even see that particular css-code in Webdev Tools. If I put the code (style="fill:blue") directly into the svg, this works, but that's not the way I need it here.
What am I doing wrong?
As both comments already answered that question 100% - I'll just sum that up to get the question closed:
a) You can either put the svg directly into html instead of linking with <img> to it. That way coloring with svg as in my question works smooth.
b) You manipulate your svgs' sourcecode a bit by appending that code
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
to the file(s). That way you can still use <img src="the.svg"...
I have created SVG code from coreldraw and want to place it inline in my HTML5 document and have a couple of queries.
How universal is SVG now-a-days? Any suggestions on backwards compatibility?
I have taken out the style data from the svg and put that into my css, I guess that's not a problem - or is it? I also added a hover rule...
.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round}
.BorderFill1 {fill:#71C6FF}
.BorderFill2 {fill:#CBEAFF}
.BorderFill1:hover {fill: green; }
Can I remove any of the following data that is not needed. (but I want it to work and look the same)
<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/>
<path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/>
</g>
</svg>
Any other hints / tips that might be useful are very welcome.
1 MDN keeps an accurate list of compatibility per-element. Here's the list for SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
2 Keep the style in your SVG - it'll make it easier to swap out for other SVG images later. You want to be able to quickly update your svg. This one is more a matter of preference.
3 I wouldn't get in the habit of tweaking vector-art exported from CorelDraw by hand. You may think to run it through a minifier, but hand-tuning is almost certainly more work than it's worth.
Here's the first minifier Google gives me:
http://petercollingridge.appspot.com/svg-optimiser
For cases where you're not inlining, you can give .svgz (compressed svg) a shot, which will make it significantly smaller: https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics
4 Hmm, other tips - well good on you for using vector art on your site. Too many web devs/designers take the shortcut of doing everything in raster. While that gets you a nice looking image for a demo, in the long run it's really hurting your site. With ubiquitous tablets + phones, pinch + zoom is everywhere and your images need to scale nicely.
Personally, I've never loved the idea of inlining svg - I've always preferred saving as .svg and src-ing it like an image. I see why you are inlining it, though, as you're using some hovers.
This is my first project using knockout and i'm running into a problem trying to databind an svg object. This is being done in a partial view. I have an svg path defined at the top of the section as so:
<svg class="is-hidden">
<defs>
<path id="shape--sort-up" d="M 4 5 L 4 7 L 11 7 L 11 5 L 7.5 1.5 L 4 5 Z" />
</defs>
</svg>
inside a im trying to do a conditional visible bind on the svg as so:
<svg data-bind="visible: status == 'yes'" viewBox="0 0 16 16" class="icon shape--sort-up">
<title>status</title>
<use xlink:href="#shape--sort-up"></use>
</svg>
I have implemented it just using an image instead of a svg and it works fine that way. When I try to do it with an svg, nothing is shown on the page. Visual studio is telling me that it doesnt like the xlink attribute being used like this, but it doesn't if the svg is defined outside of a knockout binding.
I am trying to resize an svg to the exact size which I want it (32x32).
Look at the example at http://jsfiddle.net/Uy94k/6/
This fiddle is a short outtake of a larger .svg file which I include in my html file and refeer to which image I want using:
<svg class="small" viewBox="0 0 512 512" preserveAspectRatio="none">
<g filter="">
<use xlink:href="#login"></use>
</g>
</svg>
(Any easier way to do this by the way?).
As you can see, I've tried using preserveAspectRatio, but without luck. I've also tried different styling techniques (ie. sizing in span tags outside the svn, styling in the svn tags, fiddling with height both in and where I call it by id.).
If you use a developer tool to look at the height/width of the images in the fiddle, you will see that it is 26x20.. But why is that?
Tweeking the viewBox values (guessing the value of viewBox="120 70 340 340" in this case) kinda did the trick. But it is error prone, not nice, and tedious to tweek the parameters.. Look at the example at http://jsfiddle.net/veZSX/1/ for a tweeked vs untweeked version.
There must be a better way?