How do you declare the background of an svg script image to be transparent?
If you're viewing in a browser then the background should be transparent automatically. At least it is in FF4 and the latest version of Chrome, but not in some older browsers (e.g. http://petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs).
If you want the background to be semi-transparent then fill the space with a <rect> and set its opacity to a number between 0 and less than 1.
Even easier method is to delete all the data that is used in the file content
Here is a sample before:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="24.000000pt" height="24.000000pt" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">
Here is a sample after
<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#ff0000" stroke="none">
<path d=""/>
</g>
</svg>
Remove all the data between
Related
we are at the end of our knowledge.
We are using a twig template that is generating a html page which is then rendered by wkhtmltopdf as a PDF on an Ubuntu 18.04 machine.
The current issue is, that we also moved a lot of old EPS files to SVG by using Inkscape and everything works as expected. The images are shown on the PDFs.
Now all our new images are created with AI and saved as well working SVGs like this one:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">
<style type="text/css">
.st0{fill:#575756;}
.st1{fill:none;stroke:#575756;stroke-width:2.8347;stroke-linejoin:round;stroke-miterlimit:3.8637;}
.st2{fill:#A8A8A7;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st4{fill:#DADADA;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st5{fill:#FFFFFF;}
.st6{display:none;}
.st7{display:inline;}
.st8{font-family:'HelveticaNeueLTPro-Roman';}
.st9{font-size:29.5px;}
.st10{letter-spacing:2;}
.st11{letter-spacing:-2;}
</style>
<g id="elements">
<g>
<polygon class="st0" points="368.71,103 365.16,111.5 361.62,103 368.71,103 368.71,103 "/>
<polygon class="st0" points="368.71,78.61 365.16,70.11 361.62,78.61 368.71,78.61 368.71,78.61 "/>
<line class="st1" x1="365.16" y1="75.86" x2="365.16" y2="106.24"/>
</g>
<g>
<polygon class="st0" points="368.71,324.49 365.16,332.99 361.62,324.49 368.71,324.49 368.71,324.49 "/>
<polygon class="st0" points="368.71,203.75 365.16,195.25 361.62,203.75 368.71,203.75 368.71,203.75 "/>
<line class="st1" x1="365.16" y1="200.99" x2="365.16" y2="327.73"/>
</g>
<g>
<polygon class="st0" points="81.42,345.6 72.92,342.06 81.42,338.52 81.42,345.6 81.42,345.6 "/>
<polygon class="st0" points="349.57,345.6 358.08,342.06 349.57,338.52 349.57,345.6 349.57,345.6 "/>
<line class="st1" x1="352.33" y1="342.06" x2="78.19" y2="342.06"/>
</g>
<g>
<path class="st2" d="M118.14,334.55l-40.3-3.91l-4.91-5.86v-32.87h4.68v-54.02h-4.68v-32.87l4.91-5.86l40.3-3.91h227.47
c7.75,0,14.03,6.28,14.03,14.0
...
But those SVGs do not get rendered. There is always a white space and we tried all possible embed/img/iframe/object/... methods.
I know there could be several reasons but maybe someone encountered a similiar issue. If anything else is needed as information please let me know.
Thanks!
I had the same problem, my solution is :-
Add size internally to SVG.
In your example: width="411.02px" height="411.02px"
Answer use
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="411.02px" height="411.02px" viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">
It may be difficult to see but here is the SVG you posted. I wont repeat the snippet but for others testing, mention the last <g> needs to be changed to </g></svg> and remove unfinished last section.
Showing just the top half of each A4 page (my default)
On the Left is the way it would appear printed from Microsoft Edge.
On the right is the WkhtmltoPDF output (wkhtmltox-0.12.6-1.mxe-cross-win64 in Windows 10) from the same page but with some noticeable problems.
You are using Ubuntu 18.04 thus depending on that compiled version may get different results.
You can see on the left I asked the SVG be placed in the <centre>
But on the right WkhtmltoPDF has offset it further right
However, this may be in part due to the second problem.
The Output on the left was at 1:1 scale, however to get similar proportions in Wkhtmltopdf I had to scale the x:y value 2:1 (which value is actually more units than the notional page width) anyway here is the code for that output.
<!DOCTYPE html><html><head><style>
body {background: transparent; width=794px}
</style></head><body>Hello<center>
<img src="testing.svg" width=822px height=411px />
<br>Figure 1</center><br>World</body></html>
command line wkhtmltopdf.exe --enable-local-file-access local.htm testing.pdf
I'm developing a UWP app on visual studio, and learning through the process. I'm having a problem with the icons of the navbar and svg files. First I tried my custom icons as PNG files, there was no problem, the icons were displaying correctly. Then I decided to use SVG for quality porpuses and create the same icon as SVG from a PNG file. But for some reason it is not displaying at all.
This is my XAML:
<NavigationViewItem Name="AdminTest" Tag="Profile">
<NavigationViewItem.Content>
<StackPanel Orientation="Horizontal" Margin="-15,0,0,0">
<Image Source="/Assets/test.svg" Width="40" Height="20
"/>
<TextBlock TextAlignment="Center" Text="AdminTest"/>
</StackPanel>
</NavigationViewItem.Content>
</NavigationViewItem >
And this is were the icon is supossed to be:
The svg is added in my solution and before when it was a png it worked fine, any idea what im doing wrong?
Why my SVG file is not displayin as source of my Image tag in UWP/XAML?
The problem is your svg image has specific width and height property. please edit your svg image content and find width and height property and delete them.
<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"
id="svg4236"
version="1.1"
inkscape:version="0.91 r13725"
height="200" //delete height
width="200" //delete width
viewBox="0 0 200 200"
sodipodi:docname="MallowNinebark.svg">
<metadata
I want to render images from SVG files generated by illustrator, I am using react-native 0.59, react-native-svg and react-native-svg-uri,
Here's my jsx:
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.svg')}
/>
</View>
and my SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2A327B;}
</style>
<g>
<g transform="translate(-320.000000, -1983.000000)">
<g transform="translate(40.000000, 1680.000000)">
<path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
</g>
</g>
</g>
</svg>
And is not showing when I debug, what I am missing and is there a better way to show images from SVG files?
Is converting them to jsx using SVGR is a better approach or there are other ways to do so.
Since the package seems to be no more maintained, after a good time of searching around, I’ve eventually ended up with using custom web fonts with the help of react-native-icons:
(Optional) Minimizing the size of SVG, I used for this purpose SVG minizer
Convert fonts using icomoon
Add generated font to assets/fonts folder in your root (or any other path)
Add a linker in your packages.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
And link it using react-native link
To create a custom icon component I’ve used react-native-icons, it
has a createIconSetFromIcoMoon function to render font generated from IcoMoon, and also a one generated from Fontello
In my custom component MyIcon.js, I also add the selection.json generated.
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import MyIconConfig from '../../../selection.json';
const MyIcon = createIconSetFromIcoMoon(MyIconConfig, 'MyIcon-icons', 'MyIcon-icons.ttf');
//name of font I used in the website to generate font and name of ttf files generated
export default MyIcon;
I use it in my component, I the names of icons I've found them in demo.html:
<MyIcon
style={styles.customStyle}
name="previous"
size={18}
color=’red’
/>
Note: Make sure you use version >6.3.0 of react-native-icons, and link your assets by running:
react-native link ./assets/fonts/
I have noticed that when I use Apache Batik to transcode SVG documents to PDF's that have an opacity set to less than one Batik will create a raster version of the SVG and place it in the pdf instead. When dealing with print this is not desirable. Is there any reason Batik does this? Is there anyway to avoid this flattening of SVG documents regardless of their opacity?
Our code to create the transcoder:
PDFTranscoder pdfTranscoder = new PDFTranscoder();
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_PIXEL_UNIT_TO_MILLIMETER, PIXEL_CONVERSION);
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_AUTO_FONTS, false);
We then take the SVG which is returned form element.getEncodedData() as an SVG string.
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(element.getEncodedData().getBytes()));
TranscoderOutput output = new TranscoderOutput(byteStream);
pdfTranscoder.transcode(input, output);
For opacity we edit the SVG adding a group. Consider the following svg: Note many markup tags have been removed to keep the example concise:
<svg>
<rect x="100" y="100" width="100" height="100" />
</svg>
We would edit this SVG to appear as
<svg>
<g opacity="0.5">
<rect x="100" y="100" width="100" height="100" />
</g>
</svg>
I'm using Batik to convert an svg to a pdf. The pdf that Batik outputs has no text. The svg does have text. If I use Batik to rasterize to png, I do get text.
The font I am using is Arial. I am on a debian box. Arial is installed. Here is the command I am using:
/usr/bin/java -jar /usr/local/share/java/batik-1.7/batik-rasterizer.jar \
-m application/pdf -bg 255.255.255.255 -d /tmp/olV0zQ_wYQ/chart.pdf \
/tmp/tAi25KAE2z/tmp.svg
And then I get the following output:
About to transcode 1 SVG file(s)
Converting tmp.svg to /tmp/olV0zQ_wYQ/chart.pdf ... ... success
Here is my svg file.
I just had the same problem.
It worked fine on the local machine but not on a distant server (debian).
I solved it by repositionning the text (the font was there but was out of view)
Please try this :
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="330" viewBox="0 0 500 300">
<style type="text/css"><![CDATA[
.xAxisLabels
{
color: #000000;
font-family: Arial
}
]]></style>
<title>title</title>
<desc>stuff</desc>
<defs>
<font-face font-family="Arial">
<font-face-src>
<font-face-uri xlink:href="/usr/share/hholdings/fonts/Arial.ttf"/>
</font-face-src>
</font-face>
</defs>
<text transform="translate(112.5 300)" class="xAxisLabels">jan</text>
<text transform="translate(204.17 300)" class="xAxisLabels">feb</text>
<text transform="translate(295.84 300)" class="xAxisLabels">mar</text>
<text transform="translate(387.51 300)" class="xAxisLabels">apr</text>
</svg>