I'm having some trouble getting an SVG file set as a background of an element in an MVC 3 Site (Razor View Engine) and wondering if the ASP.Net Development Server (Cassini?) is properly serving the SVG file.
My SVG file is located at /img/plus.svg and here is it's contents
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<polygon fill="#231F20" points="25,8.621 16.38,8.621 16.38,0 8.621,0 8.621,8.621 0,8.621 0,16.379 8.621,16.379 8.621,25
16.38,25 16.38,16.379 25,16.379 "/>
</svg>
The css rule I'm using to set the background is this:
.plusIcon { background-image: url(#Url.Content("~/img/plus.svg")); }
I've also added this to my Web.Config <system.webServer><staticContent> section:
<!-- Proper svg serving. Required for svg webfonts on iPad -->
<remove fileExtension=".svg"/>
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
When I navigate to the url /img/plus.svg the file is downloaded properly.
Is this just a Dev Server problem, should I try in IIS?
It turns out this is just a Cassini, ASP.Net Development Server problem. When uploaded to a proper IIS Site the SVG files are served properly.
Related
When I add settings of Imageresizer watermark plugin I've got internal server error.I just add a text bottom of Image in the left I've added code at last of web.config file for example.
<configuration>
<resizer>
<watermarks>
<text name="test2" text="store" vertical="true" align="bottomleft" />
</watermarks>
</resizer>
</configuration>
I've founded I have to add resizer name in configsection that's it.
<section name="resizer" type="ImageResizer.ResizerSection" />
I am trying to define a fixed stroke width into my SVG, similar to this thread.
In my devenv (VS 2017) I am running Edge and the project is targeting .net 4.6.1
The SVG is defined as:
<svg version="1.1"
baseProfile="full"
width="100%" height="Auto"
viewBox="0 0 #sheet.SheetShape.Bounds.Width #sheet.SheetShape.Bounds.Height"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" fill="white" />
#foreach (var cut in sheet.SheetCuts)
{
<line vector-effect="non-scaling-stroke" stroke-width="2" stroke="black" stroke-dasharray="5, 5" x1=#cut.Start.X y1=#cut.Start.Y x2=#cut.End.X y2=#cut.End.Y />
}
The vector-effect property is not recognized by VS intellisense and when the code runs nothing special happens.
What should be wrong?
I am looking into using an image as an SVG fill. I am currently using the following SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve">
<defs>
<pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image>
</pattern>
</defs>
<g class="graphic">
<path d="..."></path>
</g>
(I have left some details out ("...") of which I am sure are not relevant to my issue.)
In CSS, I use the following code to append the pattern ID. Pls see below:
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
I've already done some digging and found out that this technique (images as SVG background) isn't supported in FireFox and iOS Safari. Therefore I used the following "fall-back" method in CSS:
.default-header .site-name svg.logo .graphic {
fill:#ddd;
}
#supports (-webkit-appearance:none) {
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
}
The above code works, EXCEPT for iOS 8/9's Safari. So my issue is mainly that I don't know how to target those non-supporting browsers, which I'm sure there are more of than I am currently testing. SO... I decided to use Modernizr to look for support, but I can't seeem to find an appropriate, representational way of checking if this SVG technique is supported. In other words, on this page: https://modernizr.com/download?setclasses, I can't find the browser feature appropriate for my issue.
I hope somebody knows what direction I could best look into or better yet, has some experience with this technique, which I still think is so awesome (if it works).
Thanks in advance guys!
I found a solution by using a different approach in markup. Instead of using defs and gs, I used the following markup to achieve the same effect:
<svg id="graphic" width="300" height="40">
<!-- Graphic: Styling (inline as FF fix) -->
<style> svg image { clip-path:url(#clipping); } </style>
<!-- Clip Path -->
<clipPath id="clipping">
<!-- this might as well be any type of path -->
<text id="graphicText" x="0" y="37">My Text</text>
</clipPath>
<!-- Image -->
<image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image>
</svg>
I used CSS styling for the text itself.
Hope this helps someone!
I am working with jsf 2.0 project. i want to access xhtml file from jar file. in jar file i putted three files first.html, second.xhtml, h1.jpg. i can access jpg and html file from jar using following url.
<h:graphicImage url="#{resource['h1.jpg']}"/>
<h:outputLink value="#{resource['first.html']}">
<h:outputText value="OutputLink"/>
</h:outputLink>}
but i cant access xhtml from jar using following urls.
<h:outputLink value="#{resource['second.xhtml']}">
<h:outputText value="OutputLink"/>
</h:outputLink>
<h:outputLink value="#{resource['second.jsf']}">
<h:outputText value="OutputLink"/>
</h:outputLink>}
it is giving source not found error.
my jar structure is jar:META-INF/resources
A XHTML (Facelet) file is not a resource. Just reference it the usual way.
<h:outputLink value="second.xhtml">OutputLink</h:outputLink>
or
<h:link value="OutputLink" outcome="second" />
I've been having the same issue for the past few days. I tried a bunch of things and what finally worked for me was changing the top of my web.xml to:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
version="3.0"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
Hope that works for you.
I have a JSF 2 application which creates some SVG content. How can i embed it in the output HTML?
The generated SVG looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg">
<!--Generated by the Batik Graphics2D SVG Generator-->
<defs id="genericDefs"/>
<g/>
</svg>
I want this output directly in the rendered HTML page. I don't want to use the <object> tag, because i want to be able to manipulate the svg content on the client via javascript.
The result should look like this:
<div id="svgcontent">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 50" id="myDIVBG">
<defs>
[...]
</svg>
</div>
The above is correctly displayed in my browser, I just cant get the XML into the HTML without the XML string being escaped.
What I have always done is edit my SVG files with a tool like inkscape and include them at the appropriate spot with a ui:include tag. Like this:
<ui:include src="images/somedrawing.svg" />
The included file starts with an xml tag followed by an svg tag and the rest of the drawing. The size of the block on the page will be drawn according to the viewPort attributes of the svg tag.
This only works with HTML 5, so make sure your file starts with
<!DOCTYPE html>
I've never used JSF, but searching for "JSF disable escaping" turned up this:
<h:outputText value="???" escape="false" />