Here's a PNG version of my logo image:
Here's a screenshot of an SVG version of my logo as seen on a PC:
Here's a screenshot of how that same SVG logo looks on an iPhone and an android phone:
What's going on? Why does the mobile version look so blurred and the gradient not work on the pink petal?
Here's the actual SVG code. (For some reason, the font doesn't load in the snippet code but it loads just fine from my website: http://www.cafenocturne.com/testpage/images/svg/CafeLogoFontSVG.svg
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
<svg width="300px" height="300px" viewBox="-50 0 447 466" preserveAspectRatio="xMinYMin meet" style="overflow: visible" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<g id="petal">
<defs>
<radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
<stop stop-color="#ffdcfd" offset=".01" />
<stop stop-color="#ff94dd" offset="0.15" />
<stop stop-color="#ff92dd" offset="0.17" />
<stop stop-color="#feadef" offset=".32" />
<stop stop-color="#fec3ff" offset=".49" />
<stop stop-color="#fec3ff" offset=".55" />
<stop stop-color="#ff94dd" offset=".85" />
<stop stop-color="#ff94dd" offset="1" />
</radialGradient>
</defs>
<path id="svgpetal" fill="url(#gradpetal)" stroke="url(#gradpetal)" stroke-width="2px" filter="url(#dropshadow)" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z"
/>
<defs>
<radialGradient id="gradspine" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
<stop stop-color="#fe9bee" offset=".15" />
<stop stop-color="#fec3ff" offset=".20" />
<stop stop-color="#fec3ff" offset=".32" />
<stop stop-color="#feadef" offset=".39" />
<stop stop-color="#ff92dd" offset="0.45" />
<stop stop-color="#ff94dd" offset="0.5" />
<stop stop-color="#ffdcfd" offset="1" />
</radialGradient>
</defs>
<path id="svgspine" fill="url(#gradspine)" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z"
/>
</g>
<path id="svgmoon" fill="#FFFFFF" stroke="#000000" filter="url(#dropshadow)" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z"
/>
<g id="text">
<text style="font-family: PorcelainRegular;
font-size: 65px;
stroke: #000000;
fill: #ffffff;
overflow: visible;
filter: url(#dropshadow);">
<tspan x="0" y="0">`</tspan>
<tspan x="70" y="120">Cafe</tspan>
<tspan x="-30" y="290">Nocturne</tspan>
</text>
</g>
<defs>
<filter id="dropshadow" width="250px" height="250px">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
</g>
</svg>
Related
I am trying to replicate an SVG in Android vector drawable using the LinearGradient class. For bounding box gradient units, I am calculating the endpoints of the gradient line segment by using the following formula:
x1 = graphic_bound.left + graphic_bound.width() * svg_boundingbox_width_percentage
and
y1 = graphic_bound.top + graphic_bound.height() * svg_boundingbox_height_percentage
I am observing that the above works well for cases where graphic_bound.width() == graphic_bound.height()
But the rendering is different from SVG when the graphic bounds are non-square (width is not equal to height).
Any suggestions on what is the error here?
For example, the below SVGs look the same, one uses objectBoundingBox and another uses userSpaceOnUse units. My question is how to convert the objectBoundingBox values to userSpaceOnUse values to have the same visual appearance?
<svg width="332px" height="112px" viewBox="0 0 500 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>linear_gradient_direction</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient gradientUnits="objectBoundingBox" x1="30.2395833%" y1="44.8925781%" x2="69.9661458%" y2="54.944987%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="51%"></stop>
<stop stop-color="#D8D8D8" offset="100%"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="60" y1="30" x2="140" y2="70" id="linearGradient-3">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="51%"></stop>
<stop stop-color="#D8D8D8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="linear_gradient_direction" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Box" transform="translate(5.000000, 6.000000)" stroke="#979797">
<rect id="Rectangle" fill="url(#linearGradient-2)" x="0" y="0" width="200" height="100"></rect>
<line x1="60" y1="30" x2="140" y2="70" id="Line" stroke-linecap="square"></line>
<circle id="TopLeft" fill="#FFFFFF" cx="60" cy="30" r="5"></circle>
<circle id="Center" fill="#FFFFFF" cx="100" cy="50" r="5"></circle>
<circle id="BottomRight" fill="#FFFFFF" cx="140" cy="70" r="5"></circle>
</g>
<g id="Rectangle-Box" transform="translate(220.000000, 6.00000)" stroke="#979797">
<rect id="Rectangle" fill="url(#linearGradient-3)" x="0" y="0" width="200" height="100"></rect>
<line x1="60" y1="30" x2="140" y2="70" id="Line" stroke-linecap="square"></line>
<circle id="TopLeft" fill="#FFFFFF" cx="60" cy="30" r="5"></circle>
<circle id="Center" fill="#FFFFFF" cx="100" cy="50" r="5"></circle>
<circle id="BottomRight" fill="#FFFFFF" cx="140" cy="70" r="5"></circle>
</g>
</g>
</svg>
I'm getting the svg string from this library, and I wanted to rasterize it on both Android and iOS with SkiaSharp:
<svg viewBox="0 0 160 160" width="160" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/xlink">
<defs>
<clipPath id="hexagon-clip-3602224084" transform="scale(0.5) translate(0, 16)">
<path d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
</clipPath>
</defs>
<path fill="white" stroke="#bbbbbb" transform="translate(0, 8) scale(0.5)" d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
<g transform="scale(0.9) translate(9, 8)">
<g clip-path="url(#hexagon-clip-3602224084)">
<g color="#3949ab" fill="#fb8c00">
<rect fill="#795548" x="0" y="0" width="160" height="160">
</rect>
<circle cx="80" cy="80" r="40" fill="#3949ab">
</circle>
<g opacity=".1" fill="#010101">
<path d="M119.21,80a39.46,39.46,0,0,1-67.13,28.13c10.36,2.33,36,3,49.82-14.28,10.39-12.47,8.31-33.23,4.16-43.26A39.35,39.35,0,0,1,119.21,80Z" />
</g>
<path d="M78.1 20.6C59.9 21.7 45.6 26.4 46 31.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" opacity=".1" />
<path d="M78.1 19.6C59.9 20.7 45.6 25.4 46 30.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" fill="#fff800" />
<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464s-2.035 4.07-9.022 4.07c-6.988 0-24.148-13.092-30.163-25.121-6.014-12.03-4.068-15.214-3.095-17.248z" stroke-width=".885" />
<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464-4.334-7.518-7.873-6.633-15.214-6.191-12.118-3.184-21.582-14.418-20.079-16.806 0 .088 5.307-14.595-6.987-15.302z" opacity=".18" fill="#010101" stroke-width=".885" />
<path d="M26.7 55.6c-4.2 2.2-8.8 8.3-9.7 13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M30 59.2c-3.4 1.8-7.2 6.8-7.9 10.7" opacity=".6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M94 85s4.8-2 8.2 0c.8.4.7 1.1 0 2 0 0-3.4 4-4.1 4s-4.8-4-4.8-4c-.6-1-.3-1.7.7-2z" fill="#3a3a3a" />
<path d="M99.3 84.1c1 .2 2 .4 3 .9.8.4.7 1.1 0 2-1.2 1.5-2.6 2.9-4.1 4 1.9-3.2 2.6-6.3 1.1-6.9z" opacity=".2" />
<path d="M96 100c1.6.2 2-5.8 2-9M88 95.5s7.5 11 18 0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
<path d="M79 82s0-12 6-12 6 11.6 6 11.6S86 70 79 82zM102 82s0-12 6-12 6 11.6 6 11.6-5-11.6-12 .4z" fill="#010101" opacity=".6" />
<path d="M96 86s4-1 6 0h-6z" opacity=".3" fill="#fff" />
<path d="M93 90c-9.9-3.8-20.4-6.2-31-7M92.6 91.3c-12-2.8-27.7-1.2-27.7-1.2M92.5 93.2c-12.3-1-27.6 5-27.6 5M101 90c8.5-3.8 17.7-6.2 27-7M101.3 91.3c10.5-2.8 24.1-1.2 24.1-1.2M101.4 93.2c10.7-1 24 5 24 5" fill="none" stroke="#000" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 5.6 7 16.7 11.8 22.9 8.4s5.6-15.3-1.4-20.2c-1.7-1.4-3.2-2.9-4.4-4.7-7.9-3.2-14.6-8.1-19.5-15.8z" fill="#99671d" />
<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 12.2 12.9 22.9 8.4 22.9 8.4-10.1 1.1-21.6-35.8-21.6-35.8-1.4-1.5-2.6-3.1-3.7-4.9z" fill="#6d4716" />
<path d="M54.8 115.4c-4 0-7.3-3.3-7.3-7.3.1-1.3.5-2.7 1.1-3.8.1-.2 7.1 8.1 10.8 9.5 0-.1-1.3 1.2-4.6 1.6z" fill="#fff" />
<path d="M58.8 113.3c-.8.3-1.7.5-2.6.6-3.4-.1-6-2.9-5.9-6.3 0-.6.1-1.2.2-1.8 0 .2 4.6 6.2 8.3 7.5z" opacity=".2" />
<path d="M94 124.5s-2.8 5.5-5.5 7.5c-1.2.8-2.3 1.8-3.4 2.7v4.4c0 .4 10.2-3 8.9-14.6z" fill="#6d4716" />
<path d="M94.6 124.5s-5.4-1.4-8.9 2c-3.4 3.4-3.4 8.2-1.4 8.2s2.2.7 10.3-10.2z" fill="#fff" />
<path d="M120.5 108.8s-4.8-8.2-19.1-.7c-14.3 7.5-2.7 23.2-15.7 30.7 0 0 3.7 3.64 8.39-5.85 4.644-9.396 4.61-24.75 26.41-24.15z" fill="#99671d" />
<path d="M85.8 138.8s6.1 2.7 10.2-10.9 8.9-21.8 20.4-21.1c1.6 0 3.2.6 4.4 1.7 5.6 5 1.3 19.6-4.4 24.2-6.8 5.4-21.8 10.9-27.9 8.9s-2.7-2.8-2.7-2.8z" fill="#444" />
<path d="M84.8 119.2l1 7.4c1.9-1.4 3.6-2.3 5-2.3l-.6-6.2c-1.8.5-3.6.8-5.4 1.1z" fill="#ffc866" />
<path d="M119.2 112.6h-11.6c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM120.3 115.8h-14.7c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h14.7c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM120.3 118.9h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM119.2 122.1h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .2-.2.5-.5.5zM118.1 125.2h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM116.1 128.4H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h17.9c.3 0 .5.2.5.5 0 .2-.3.5-.5.5zM114 131.5H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5H114c.3 0 .5.2.5.5v.1c0 .2-.3.4-.5.4zM109.8 134.7H96.1c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h13.7c.3 0 .5.2.5.5v.1c0 .2-.3.5-.5.5zM104.5 137.8H95c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h9.5c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5z" />
</g>
</g>
</g>
</svg>
This is how I'm currently doing it:
var byteArray = Encoding.ASCII.GetBytes(svgStoredAsString);
using (var inputStream = new MemoryStream(byteArray))
{
var svg = new SkiaSharp.Extended.Svg.SKSvg();
svg.Load(inputStream);
using (var bitmap = new SKBitmap(100, 100))
using (var canvas = new SKCanvas(bitmap))
{
canvas.Scale(100 / svg.CanvasSize.Width, 100 / svg.CanvasSize.Height);
canvas.DrawPicture(svg.Picture);
canvas.Flush();
canvas.Save();
using (var file = File.OpenWrite(path))
using (var outputStream = new SKManagedWStream(file))
{
bitmap.Encode(outputStream, SKEncodedImageFormat.Png, 100);
}
}
}
((Image)image).Source = ImageSource.FromFile(path);
The svg shows just fine on the browser and even opens on Illustrator:
This is what I'm getting instead when rasterizing with my code:
I am trying to create a favourite icon something like the following icon.
While creating it i need the inner path (the area in blue color)to be transparent in the result.But while giving the transparent color it is showing the color that is filled in the outer path.i.e complete shape in orange color. How i can i make a vector drawable with transparent inner path
My vector drawable is
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#android:color/transparent"
android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
<path
android:fillColor="#F7592B"
android:pathData="M 20.99 1.04 C 26.30 1.45 30.97 4.88 36.04 5.70 C 40.02 5.23 43.79 2.79 47.70
1.80 C 56.08 -0.90 65.46 4.21 69.03 11.97 C 71.67 17.65 71.59 24.74 70.62 30.81
C 68.57 41.48 60.32 50.55 51.81 56.81 C 47.69 59.73 43.11 62.72 38.21 64.12 C
34.80 65.13 31.23 63.34 28.24 61.86 C 19.69 57.27 11.77 50.76 6.25 42.72 C 0.82
34.78 -0.33 24.87 1.66 15.60 C 3.69 7.15 12.14 0.18 20.99 1.04 Z" />
<path
android:fillColor="#1721dc"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z" />
</vector>
You have two ways to go:
1) create another vector drawable, which will draw only the outer line, instead of overlapping two hearts
or
2) remove the orange heart and add an orange stroke to the blue heart. Just copy the code below and try it. Be aware: half of the stroke width will go inside the image and half will go outside, so your image will differ a bit (stoke will be closer to the center of the image)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#00000000"
android:strokeColor="#F7592B"
android:strokeWidth="6"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z" />
</vector>
Result:click to see the resulting image
Please use StrokeColor and strokeWidth like this
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#android:color/transparent"
android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
<path
android:fillColor="#000000000"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z"
android:strokeColor="#F7592B"
android:strokeWidth="5"/>
I have the vector drawable file(start on emulator API version 25):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="500dp"
android:height="500dp"
android:viewportWidth="500"
android:viewportHeight="500">
<path
android:fillColor="#FFFFFF"
android:strokeColor="#000000"
android:strokeWidth="6"
android:strokeMiterLimit="10"
android:pathData="M 254.9 162.9 C 293.836074863 162.9 325.4 194.463925137 325.4 233.4 C 325.4 272.336074863 293.836074863 303.9 254.9 303.9 C 215.963925137 303.9 184.4 272.336074863 184.4 233.4 C 184.4 194.463925137 215.963925137 162.9 254.9 162.9 Z" />
<path
android:fillColor="#000000"
android:pathData="M 231 204.3 C 240.223155322 204.3 247.7 211.776844678 247.7 221 C 247.7 230.223155322 240.223155322 237.7 231 237.7 C 221.776844678 237.7 214.3 230.223155322 214.3 221 C 214.3 211.776844678 221.776844678 204.3 231 204.3 Z" />
<path
android:fillColor="#000000"
android:pathData="M 279 204.3 C 288.223155322 204.3 295.7 211.776844678 295.7 221 C 295.7 230.223155322 288.223155322 237.7 279 237.7 C 269.776844678 237.7 262.3 230.223155322 262.3 221 C 262.3 211.776844678 269.776844678 204.3 279 204.3 Z" />
<path
android:fillColor="#FFFFFF"
android:pathData="M 279 207.2 C 283.694420374 207.2 287.5 213.691871127 287.5 221.7 C 287.5 229.708128873 283.694420374 236.2 279 236.2 C 274.305579626 236.2 270.5 229.708128873 270.5 221.7 C 270.5 213.691871127 274.305579626 207.2 279 207.2 Z" />
<path
android:fillColor="#FFFFFF"
android:pathData="M 231 213.2 C 239.008128873 213.2 245.5 217.005579626 245.5 221.7 C 245.5 226.394420374 239.008128873 230.2 231 230.2 C 222.991871127 230.2 216.5 226.394420374 216.5 221.7 C 216.5 217.005579626 222.991871127 213.2 231 213.2 Z" />
<path
android:fillColor="#000000"
android:pathData="M 231.3 221.1 C 235.552592574 221.1 239 224.547407426 239 228.8 C 239 233.052592574 235.552592574 236.5 231.3 236.5 C 227.047407426 236.5 223.6 233.052592574 223.6 228.8 C 223.6 224.547407426 227.047407426 221.1 231.3 221.1 Z" />
<path
android:fillColor="#000000"
android:pathData="M 277.2 221.7 C 281.452592574 221.7 284.9 225.147407426 284.9 229.4 C 284.9 233.652592574 281.452592574 237.1 277.2 237.1 C 272.947407426 237.1 269.5 233.652592574 269.5 229.4 C 269.5 225.147407426 272.947407426 221.7 277.2 221.7 Z" />
<path
android:fillColor="#000000"
android:pathData="M 254.9 237.7 C 263.073814297 237.7 269.7 249.564454129 269.7 264.2 C 269.7 278.835545871 263.073814297 290.7 254.9 290.7 C 246.726185703 290.7 240.1 278.835545871 240.1 264.2 C 240.1 249.564454129 246.726185703 237.7 254.9 237.7 Z" />
</vector>
I added the file to ImageView
<ImageView
android:id="#+id/authorization_icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/authorization_icon_margin"
android:layout_marginBottom="#dimen/authorization_icon_margin"
app:srcCompat="#drawable/rocketv"/>
And when I tried to inflate layout
setContentView(R.layout.activity_auth);
I caught the error:
android.view.InflateException: Binary XML file line #0: Error inflating class ImageView
But Android studio defines my picture without any problems. I can see it in activity_auth layout.
Solution 1:
For using VectorDrawable from java or to use it as background (in xml also) you need to intimate AppCompatDelegate to enable compat vector from resource. Below is the code for that.
static
{
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
So define it this way
public class MainActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
upper side of OnCreate Method.
Solution 2 :
Whenever you are going to use VectorDrawable from java or to use it as background (in xml also) remember to use AppCompatView instead of normal view, here I have used AppCompatImageView
try like below.
replace app:srcCompat="#drawable/rocketv" with
android:src="#drawable/rocketv"
<ImageView
android:id="#+id/authorization_icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/authorization_icon_margin"
android:layout_marginBottom="#dimen/authorization_icon_margin"
android:src="#drawable/rocketv"/>
In my android app I try to get a Bitmap-Object from a SVG-File and store it in the cache. Then it should be displayed from this bitmap in an ImageView Object. I don't get it working, either the ImageView gets a wrong density, the Picture is too small or too large. May anybody tell me whats wrong with that code? For my purposes I use the AndroidSVG library (link). The Image should has 30dp width and height.
ImageView img = (ImageView)getView().findViewById(R.id.testingImage);
try {
int size = convertDPtoPixels(30);
SVG svg = SVG.getFromResource(mGlob.mContext,R.raw.vectorimage);
svg.setDocumentHeight(size);
svg.setDocumentWidth(size);
PictureDrawable pictureDrawable = new PictureDrawable(svg.renderToPicture());
Bitmap mutableBitmap = Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mutableBitmap);
pictureDrawable.setBounds(0,0,size,size);
pictureDrawable.draw(canvas);
img.setImageBitmap(mutableBitmap);
} catch (SVGParseException e) {
e.printStackTrace();
}
Edit 30.3.2015
If I try to create the Bitmap with the Pixel-size like this, I get a too small Image (but it is sharp):
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Addition Information:
The Blue Color is the background color, from my ImageView. I use it to see where it starts and end, because my SVG has transparent surfaces. The SVG should fill the blue area...
Here is my SVG-File:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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="30"
height="30"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<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>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>
You appear to be rendering the SVG to a 30x30 bitmap then scaling it up to (size x size).
Try changing the bitmap creation to:
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Update:
The problem is that Inkscape doesn't automatically give it's SVG files a viewBox.
Read this AndroidSVG FAQ question on how to deal with Inkscape files. https://code.google.com/p/androidsvg/wiki/FAQ#Dealing_with_Inkscape_files
You can either follow the advice there (which updates the SVG programmatically at runtime). Or alternatively, alter the SVG by hand. Make the following changes:
width="100%"
height="100%"
viewBox="0 0 30 30"
<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="100%"
height="100%"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg"
viewBox="0 0 30 30">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<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>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>