i am new in web design using reactjs, i have question about code that make image like this
<path fill="#06C755" d="M106.214,4.621h-7.829c-1.201,0-2.175,0.972-2.175,2.171v28.894l-22.288-30.1 c-0.052-0.077-0.11-0.15-0.172-0.219c-0.004-0.006-0.009-0.011-0.014-0.016c-0.041-0.045-0.083-0.09-0.127-0.133 c-0.014-0.013-0.028-0.024-0.041-0.036c-0.038-0.034-0.076-0.067-0.116-0.098c-0.018-0.015-0.038-0.029-0.057-0.043 c-0.036-0.027-0.075-0.053-0.112-0.078c-0.022-0.013-0.044-0.026-0.066-0.04C73.178,4.901,73.14,4.879,73.1,4.859 c-0.023-0.011-0.045-0.022-0.069-0.033c-0.041-0.019-0.082-0.037-0.125-0.053c-0.022-0.01-0.045-0.018-0.068-0.027 c-0.043-0.014-0.086-0.029-0.13-0.04c-0.024-0.008-0.05-0.014-0.075-0.02c-0.042-0.01-0.084-0.02-0.127-0.028 c-0.029-0.005-0.06-0.01-0.09-0.014c-0.039-0.005-0.078-0.01-0.116-0.013c-0.037-0.004-0.075-0.005-0.113-0.006 c-0.025-0.001-0.049-0.004-0.074-0.004h-7.828c-1.202,0-2.175,0.972-2.175,2.171v48.635c0,1.199,0.973,2.171,2.175,2.171h7.828 c1.202,0,2.176-0.972,2.176-2.171V26.542l22.316,30.137c0.153,0.217,0.34,0.396,0.549,0.537c0.008,0.006,0.017,0.011,0.026,0.017 c0.043,0.03,0.087,0.055,0.133,0.081c0.02,0.012,0.041,0.023,0.062,0.034c0.033,0.019,0.068,0.034,0.103,0.05 c0.035,0.016,0.069,0.032,0.105,0.045c0.023,0.009,0.045,0.017,0.067,0.025c0.048,0.017,0.097,0.032,0.147,0.047 c0.011,0.003,0.021,0.005,0.031,0.008c0.178,0.048,0.365,0.075,0.557,0.075h7.829c1.2,0,2.175-0.972,2.175-2.171V6.792 C108.389,5.593,107.414,4.621,106.214,4.621"></path>
and this
<polygon fill="#231F1F" points="207.065,113.178 207.065,90.966 211.022,90.966 211.022,102.62 216.199,96.901 220.425,96.901 214.127,103.869 221.216,113.178 216.685,113.178 211.022,105.787 211.022,113.178 "/>
this code that show image shaped letter.
and my question is what tools that they used?
Related
I used jetpack compose, imported a vector icon from Resource Manager (View->Tool Windows->Resource Manager) and got the following XML code.
But I got an error of ?attr/colorControlNormal saying "not found".
Could some one tell me how to fix please? Thanks.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
You need to change ?attr/colorControlNormal to ?android:colorControlNormal
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?android:colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
I want to use text instead of StandardMarker in Nokia HERE map.
I tried using TextMarker but didn't work. May be I used incorrectly. Can you suggest me that how to do this?
TextMarker is not a built-in class of the API, rather the example in the API playground (http://developer.here.com/apiexplorer/examples/public/api-for-js/markers/extending-marker-to-text-marker.html) introduces this class by extending the Marker class. Take a look at the source code of the API explorer example.
The general idea is that you will need to produce a graphics (or graphics image) for the marker icon to use. There are multiple ways to do this but creating an SVG markup string with text is probably the easiest way to do it (as shown in the example code).
What the code in the example does it takes some variables and replaces parts of the SVG template string with the values.
var iconSVG = '<svg width="__WIDTH__" height="__HEIGHT__" xmlns="http://www.w3.org/2000/svg">' +
'<rect x="__X__" y="__Y__" rx="5" ry="5" width="__RECT_WIDTH__" height="__RECT_HEIGHT__" ' +
'style="fill:__BRUSH__;stroke:__STROKE__;stroke-width:__STROKEWIDTH__;"/>' +
'<text x="__OFFSETX__" y="__OFFSETY__" fill="__TEXT_PEN__" style="font-weight:normal; ' +
'font-family:__FONTFAMILY__; font-size:__FONTSIZE__;" textContent="__TEXT__">__TEXT__</text>' +
'</svg>',
From the SVG markup string you can produce a graphics image:
icon = new nokia.maps.gfx.GraphicsImage(that.svgParser.parseSvg(iconSVG));
And this graphics image can be used as a marker icon.
marker.set("icon", icon)
The most important thing to note is that you need to figure out the size of your text (width and height) manually.
As part of a programming assignment, I am trying to give color to all European countries.
I found the coordinates of these countries from the following wikipedia page.
Let's say, for example, that I want to color Northern Ireland. The coordinates are given here:
<path xmlns="http://www.w3.org/2000/svg" class="landxx gb eu" d="M 1260.508,337.032 C 1261.121,336.062 1262.494,336.081 1263.388,335.52 1263.057,335.277 1262.743,335.012 1262.448,334.727 1264.3,335.304 1265.011,333.238 1265.893,332.227 1266.732,331.266 1268.474,332.53 1268.718,330.767 1270.35,331.522 1272.386,329.639 1274.016,330.766 1274.677,331.222 1275.068,332.288 1275.375,332.975 1275.319,332.851 1276.594,334.325 1276.56,334.063 1276.597,334.341 1275.171,335.037 1274.978,335.231 1275.478,335.181 1276.972,334.543 1277.301,335.202 1277.635,335.87 1278.28,337.23 1277.138,337.536 1277.316,336.828 1277.055,335.884 1276.128,336.096 1276.687,336.427 1276.615,337.009 1276.268,337.464 1276.561,337.31 1276.811,337.331 1277.018,337.527 1277.091,338.02 1275.965,338.658 1275.586,338.698 1274.608,338.801 1274.61,340.437 1273.42,340.084 1272.419,339.787 1272.235,339.475 1271.382,340.035 1270.657,340.511 1269.467,340.023 1269.788,339.049 1269.388,339.07 1266.639,336.003 1266.454,337.971 1266.126,341.45 1261.861,338.159 1260.508,337.032" id="path2690"/>
I'd like to colour this country in a separate CSS file. I though I could do this by accessing the id of the country in the CSS file:
#path2690 {
fill: green;
}
It is not working, however. What is going wrong?
Thanks a lot in advance
There are a couple of problems here. Firstly you can't display a raw SVG <path> in an html file it has to be wrapped in a <svg> element.
Once you do that, it displays but the country is so small you can't see it no matter what colour it is even though the colouring actually works. If you give the <svg> element a viewBox of viewBox="1415 390 30 30" you can then see it and see that adjusting the colour in CSS changes it.
I have a PNG image, the image features a shape surrounded by a transparent area:
I want to recreate this image as a path in flex mxml, something like this:
<s:Path data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0" />
How can I export the path data so that I can use this shape in Flex, is there a program that will do this for me?
Illustrator will export an FXG, as will Photoshop.
My problem was that my original image was a flat file, not a path. This meant that following #www.Flextras.com's answer didn't work for me, the result was an FXG with an image embedded.
The process I used is as follows, I used Adobe Fireworks for this:
1) Magic wand selection
Select the body of the image with magic wand.
2) Convert to path
Right click -> Modify Marquee -> Convert to Path
3) Export as FXG
File -> Export
4) Done
Open the FXG in notepad and extract the path data.
I used a program called Fritzing to draw some basic Arduino schematics, and then export the output as a SVG. This works just as expected, but then I noticed that the SVG output only looks okay in some browsers and only okay in some versions of Firefox.
Since Fritzing is a open source app I figured that I could look into the code (and maybe help out a little).
But now over to the question, what is a correct SVG supposed to look like? What verifier over at W3C can I use to check the file?
I tried to use the verifiers found on this page: http://validator.w3.org/dev/tests/
But they all complained a lot, especially about the SVG version. The verifiers seem to like version 1.0 and 1.1, but when I look at the top of this file seems to be using version 1.2?
This is the top three lines from the problematic file (reformatted for readability):
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!-- Created with Fritzing (http://www.fritzing.org/) -->
<svg width="3.50927in"
x="0in"
version="1.2"
y="0in"
xmlns="http://www.w3.org/2000/svg"
height="2.81713in"
viewBox="0 0 252.667 202.833"
baseProfile="tiny"
xmlns:svg="http://www.w3.org/2000/svg">
Is there a specific SVG 1.2 verifier I can use?
Or shall I try to verify the SVG as if it was a classical XML file?
(As a side note, Fritzing seems to use Qt, so if there some QTest I can use it may be useful.)
You can use e.g http://validator.nu. Since your file is standalone, select xml parsing, paste the RNG url in the schema textfield (the schema url you're looking can be found in the relevant specification, in this case SVG 1.2 Tiny: http://www.w3.org/TR/SVGTiny12/relaxng/Tiny-1.2.rng ).
Even your three line snippet isn't valid SVG 1.2 Tiny content (x and y attributes are not allowed on the <svg> element in Tiny). You should add a link to your file somewhere, otherwise it's hard to say what it should look like.
There is a python utility in terminal svgcheck, which claims to target version 1.2, as defined in draft-7996-bis. A promising utility, IMHO.
SVG Checking Procedure.
pip install svgcheck
svgcheck ~/path/to/mysvgfile.svg
The svg file with proper standards will give something like:
$ svgcheck alert-circle.svg
Parsing file alert-circle.svg
INFO: File conforms to SVG requirements.
Make sure you have pip installed and python configured properly
For the subset SVG Tiny 1.2 Portable/Secure (SVG P/S), used for example in Brand Indicators for Message Identification (BIMI), see Using the RNC Schema to Validate BIMI SVG Images. It shows how to perform Relax NG Compact (RNC) XML schema validation on the command line.
pip3 install jingtrang
wget 'https://bimigroup.org/resources/SVG_PS-latest.rnc.txt'
pyjing -c SVG_PS-latest.rnc.txt my-image.svg
For my use-case, a PNG logotype converted to SVG Tiny 1.2 using png2svg, this was the output.
my-image.svg:1:159: error: value of attribute "baseProfile" is invalid; must be equal to "tiny-ps"
my-image.svg:1:174: error: element "g" not allowed yet; missing required element "title"
Errors were easily fixed by editing the baseProfile value and adding <title>A very nice image title</title>.